第一步：首先在模型建立三个字段：
字段名：map_x 字段类型：DOUBLE
字段名：map_y 字段类型：DOUBLE
字段名：map_z 字段类型：TINYINT 最好设置个默认值13 14左右，是调整缩放级别的
系统模型该选的都选上，比如录入项、投稿项、可增加、可修改、内容模版。
第二步：修改系统模型表单模版
把这三个字段的代码删除改成：
<span style="color:#170"><tr</span><span style="color:#170">></span><span style="color:#170"><td</span> <span style="color:#00c">width</span>=<span style="color:#a11">’16%’</span> <span style="color:#00c">height</span>=<span style="color:#a11">25</span> <span style="color:#00c">bgcolor</span>=<span style="color:#a11">’ffffff’</span><span style="color:#170">></span>标注地图<span style="color:#170"></td</span><span style="color:#170">></span><br /><span style="color:#170"><td</span> <span style="color:#00c">bgcolor</span>=<span style="color:#a11">’ffffff’</span><span style="color:#170">></span><span style="color:#170"><a</span> <span style="color:#00c">href</span>=<span style="color:#a11">”javascript:void(0)”</span> <span style="color:#00c">onclick</span>=<span style="color:#a11">”showOrHide(1)”</span><span style="color:#170">></span>点击地图标注<span style="color:#170"></a</span><span style="color:#170">></span><span style="color:#170"></td</span><span style="color:#170">></span><span style="color:#170"></tr</span><span style="color:#170">></span>
然后在底部添加以下代码：
<span style="color:#170"><style</span><span style="color:#170">></span><br />.belowdiv{<br />display: none;<br />position: absolute;<br />top: 0%;<br />left: 0%;<br />width: 100% !important; width:100%;<br />height: 100% !important; _height:1024px;<br />background-color: gray;<br />filter:alpha(opacity=20); opacity:0.2;<br />z-index:1001;<br />}<br />.topdiv {<br />display: none;<br />position: absolute;<br />top: 25%;<br />left: 25%;<br />width: 582px;<br />height: 450px;<br />padding: 16px;<br />border-top:solid,16px,red;<br />border-left:1px;<br />border-right:1px;<br />border-bottom:1px;<br />background-color: white;<br />z-index:1002;<br />overflow: auto;<br />}<br /><span style="color:#170"></style</span><span style="color:#170">></span><br /><span style="color:#170"><script</span> <span style="color:#00c">type</span>=<span style="color:#a11">"text/javascript"</span><span style="color:#170">></span><br />function showOrHide(flag) {<br />if(flag == 1) {<br />document.getElementById("top").style.display = "block";<br />document.getElementById("below").style.display = "block";<br />}<br />if(flag == 2) {<br />document.getElementById("top").style.display = "none";<br />document.getElementById("below").style.display = "none";<br />}<br />}<br /><span style="color:#170"></script</span><span style="color:#170">></span><br /><span style="color:#170"><div</span> <span style="color:#00c">id</span>=<span style="color:#a11">"top"</span> <span style="color:#00c">class</span>=<span style="color:#a11">"topdiv"</span><span style="color:#170">></span><br />当前坐标：[!--map_x--] – [!--map_y--] 缩放：[!--map_z--] <span style="color:#219">&nbsp;</span><span style="color:#219">&nbsp;</span><span style="color:#170"><a</span> <span style="color:#00c">href</span> = <span style="color:#a11">"javascript:void(0)"</span> <span style="color:#00c">onclick</span> = <span style="color:#a11">"showOrHide(2)"</span><span style="color:#170">></span>提交<span style="color:#170"></a</span><span style="color:#170">></span><br /><span style="color:#170"><div</span> <span style="color:#00c">style</span>=<span style="color:#a11">"width:520px;height:340px;border:1px solid gray"</span> <span style="color:#00c">id</span>=<span style="color:#a11">"container"</span><span style="color:#170">></span><br /><span style="color:#170"></div</span><span style="color:#170">></span><br /><span style="color:#170"><script</span> <span style="color:#00c">type</span>=<span style="color:#a11">"text/javascript"</span> <span style="color:#00c">src</span>=<span style="color:#a11">"http://api.map.baidu.com/api?v=1.2"</span><span style="color:#170">></span><span style="color:#170"></script</span><span style="color:#170">></span><br /><br /><span style="color:#170"><script</span> <span style="color:#00c">type</span>=<span style="color:#a11">"text/javascript"</span><span style="color:#170">></span><br />var map = new BMap.Map("container");<br />var point = new BMap.Point(115.449106, 38.887932); //初始位置，我这个是保定可能是css原因，这个坐标位置偏移一点<br />map.addControl(new BMap.NavigationControl()); //鱼骨控件显示<br />map.enableScrollWheelZoom();<br />map.centerAndZoom(point, 14); //初始缩放级别<br />// 获取经度 纬度<br />map.addEventListener("click", function(e){<br /> document.getElementById("map_x").value=e.point.lng;<br /> document.getElementById("map_y").value=e.point.lat;<br />//下面这行是点击提示语，需要可以去掉 "//"<br />// alert("系统已记录您标注的位置坐标");<br /><br />});<br />// 获取缩放<br />map.addEventListener("zoomend", function(){<br /> document.getElementById("map_z").value=this.getZoom();<br />});<br />// 设置个默认点，移动这个图标也可以获得坐标。不想要也可以删除<br />var point = new BMap.Point(115.487362, 38.868383); // 默认标注图标位置<br />var marker = new BMap.Marker(point); // 创建标注<br />map.addOverlay(marker); // 将标注添加到地图中<br /><br />var opts = {<br /> width : 250, // 信息窗口宽度<br /> height: 100, // 信息窗口高度<br /> title : "温馨提示" // 信息窗口标题<br />}<br />var infoWindow = new BMap.InfoWindow("您可以移动此图标到您所在位置或点击您所在的位置，系统会自动获得坐标", opts); // 创建信息窗口对象<br /><br />marker.addEventListener("click", function(){<br /> this.openInfoWindow(infoWindow);<br />});<br />// 移动获取坐标<br />marker.enableDragging();<br />marker.addEventListener("dragend", function(e){<br /> document.getElementById("map_x").value=e.point.lng; //移动中心点改变坐标<br /> document.getElementById("map_y").value=e.point.lat;<br />//下面这行是移动坐标提示语，需要可以去掉 "//"<br />// alert("系统已记录您当前位置坐标：" + e.point.lng + ", " + e.point.lat + "");<br />});<br /><br /><span style="color:#170"></script</span><span style="color:#170">></span><br /><br /><span style="color:#170"></div</span><span style="color:#170">></span><br /><br /><span style="color:#170"><div</span> <span style="color:#00c">id</span>=<span style="color:#a11">"below"</span> <span style="color:#00c">class</span>=<span style="color:#a11">"belowdiv"</span><span style="color:#170">></span><span style="color:#170"></div</span><span style="color:#170">></span>
这样就可以把坐标和缩放级别存储于数据库了
第三步：内容页模板中调用：
<br /><<span style="color:#000">script</span> <span style="color:#000">type</span>=<span style="color:#000">”text</span>/<span style="color:#000">javascript</span><span style="color:#000">”</span> <span style="color:#000">src</span>=<span style="color:#000">”http</span>:<span style="color:#a50">//api.map.baidu.com/api?v=1.2″></script></span><br /><<span style="color:#000">div</span> <span style="color:#000">style</span>=<span style="color:#000">”width</span>:<span style="color:#164">520</span><span style="color:#000">px</span>;<span style="color:#000">height</span>:<span style="color:#164">340</span><span style="color:#000">px</span>;<span style="color:#000">border</span>:<span style="color:#164">1</span><span style="color:#000">px</span> <span style="color:#000">solid</span> <span style="color:#000">gray</span><span style="color:#000">”</span> <span style="color:#000">id</span>=<span style="color:#000">”container</span><span style="color:#000">”</span>><<span style="color:#a11">/div></span><br /><<span style="color:#000">script</span> <span style="color:#000">type</span>=<span style="color:#000">”text</span>/<span style="color:#000">javascript</span><span style="color:#000">”</span>><br /><span style="color:#708">var</span> <span style="color:#000">sContent</span> =<br /><span style="color:#000">“</span><<span style="color:#000">h4</span> <span style="color:#000">style</span>=<span style="color:#000">’margin</span>:<span style="color:#164">0</span> <span style="color:#164">0</span> <span style="color:#164">5</span><span style="color:#000">px</span> <span style="color:#164">0</span>;<span style="color:#000">padding</span>:<span style="color:#164">0.2</span><span style="color:#000">em</span> <span style="color:#164">0</span><span style="color:#000">′</span>>[!--<span style="color:#000">title</span>--]<<span style="color:#a11">/h4>” +</span><br /><span style="color:#000">“</span><<span style="color:#000">img</span> <span style="color:#000">style</span>=<span style="color:#000">’float</span>:<span style="color:#000">right</span>;<span style="color:#000">margin</span>:<span style="color:#164">4</span><span style="color:#000">px</span><span style="color:#000">’</span> <span style="color:#000">id</span>=<span style="color:#000">’imgDemo</span><span style="color:#000">’</span> <span style="color:#000">src</span>=<span style="color:#000">’</span>[!--<span style="color:#000">titlepic</span>--]<span style="color:#000">‘</span> <span style="color:#000">width</span>=<span style="color:#000">’139</span><span style="color:#000">′</span> <span style="color:#000">height</span>=<span style="color:#000">’104</span><span style="color:#000">′</span> <span style="color:#000">title</span>=<span style="color:#000">’</span>[!--<span style="color:#000">title</span>--]<span style="color:#000">‘</span>/><span style="color:#000">”</span> +<br /><span style="color:#000">“</span><<span style="color:#000">p</span> <span style="color:#000">style</span>=<span style="color:#000">’margin</span>:<span style="color:#164">0</span>;<span style="color:#000">line</span>-<span style="color:#000">height</span>:<span style="color:#164">1.5</span>;<span style="color:#000">font</span>-<span style="color:#000">size</span>:<span style="color:#164">13</span><span style="color:#000">px</span>;<span style="color:#000">text</span>-<span style="color:#000">indent</span>:<span style="color:#164">2</span><span style="color:#000">em</span>;<span style="color:#000">width</span>:<span style="color:#164">320</span><span style="color:#000">px</span>;<span style="color:#000">’</span>>[!--<span style="color:#000">smalltext</span>--]<span style="color:#000">…</span><<span style="color:#a11">/p>” +</span><br /><span style="color:#000">“</span><<span style="color:#a11">/div>”;</span><br /><span style="color:#708">var</span> <span style="color:#000">map</span> = <span style="color:#708">new</span> <span style="color:#000">BMap</span>.<span style="color:#000">Map</span>(<span style="color:#000">“container</span><span style="color:#000">”</span>);<br /><span style="color:#708">var</span> <span style="color:#000">point</span> = <span style="color:#708">new</span> <span style="color:#000">BMap</span>.<span style="color:#000">Point</span>([!--<span style="color:#000">map_x</span>--], [!--<span style="color:#000">map_y</span>--]);<br /><span style="color:#708">var</span> <span style="color:#000">marker</span> = <span style="color:#708">new</span> <span style="color:#000">BMap</span>.<span style="color:#000">Marker</span>(<span style="color:#000">point</span>);<br /><span style="color:#708">var</span> <span style="color:#000">infoWindow</span> = <span style="color:#708">new</span> <span style="color:#000">BMap</span>.<span style="color:#000">InfoWindow</span>(<span style="color:#000">sContent</span>); <span style="color:#a50">// 创建信息窗口对象</span><br /><br /><span style="color:#000">map</span>.<span style="color:#000">centerAndZoom</span>(<span style="color:#000">point</span>, [!--<span style="color:#000">map_z</span>--]);<br /><span style="color:#000">map</span>.<span style="color:#000">addOverlay</span>(<span style="color:#000">marker</span>);<br /><br /><span style="color:#000">marker</span>.<span style="color:#000">addEventListener</span>(<span style="color:#000">“click</span><span style="color:#000">”</span>, <span style="color:#708">function</span>(){<br /><span style="color:#000">this</span>.<span style="color:#000">openInfoWindow</span>(<span style="color:#000">infoWindow</span>);<br /><span style="color:#a50">//图片加载完毕重绘infowindow</span><br /><span style="color:#000">document</span>.<span style="color:#000">getElementById</span>(<span style="color:#000">‘imgDemo</span><span style="color:#000">’</span>).<span style="color:#000">onload</span> = <span style="color:#708">function</span> (){<br /><span style="color:#000">infoWindow</span>.<span style="color:#000">redraw</span>();<br />}<br />});<br /><<span style="color:#a11">/script></span>
至此，地图标注功能便做好了。
