帝国CMS添加百度地图标注方法

最近在做房产网，发现房产房源需要地图定位的功能，网上找呀找呀，找到很多方法，有一个用的人比较多，也比较流行，但是按提示方法添加后报服务器错误，最后发现所有人都是随手转发，根本没有运用。
后来直接找到了原发作者，感谢他的分享，但原发作者早就忘了这个功能，也不再提供这个功能服务，最后无意中发现代码中的双引号单引号有好几个是全角，由于是在DW上修改的，所以全角和半角真的是很难发现。
我修改过来后运行正常，但我只测试了标注定位，内容页读取数据代码我没有使用，因为我仿的房产网模板里面有现成的地图定位，只需提取到定位数据就行了。



下面我贴出代码：
第一步：首先在模型建立三个字段，选附表即可：
字段名：map_x 字段类型：DOUBLE
字段名：map_y 字段类型：DOUBLE
字段名：map_z 字段类型：TINYINT 最好设置个默认值13或者14左右，是调整缩放级别的
系统模型该选的都选上，比如录入项、投稿项、可增加、可修改、内容模版，必填项一般不要选，怕有人不标注定位，信息发布不了。

第二步：修改系统模型前台投稿表单模版

把这三个字段的代码删除改成：

1. <tr><td width='16%' height=25 bgcolor='ffffff'>标注地图</td>
   
2. <td bgcolor='ffffff'><a href="javascript:void(0)" onclick="showOrHide(1)">点击地图标注</a></td></tr>

复制代码

然后在前台投稿表单代码底部添加以下代码：

1. <style>
   
2. .belowdiv{
   
3. display: none;
   
4. position: absolute;
   
5. top: 0%;
   
6. left: 0%;
   
7. width: 100% !important; width:100%;
   
8. height: 100% !important; _height:1024px;
   
9. background-color: gray;
   
10. filter:alpha(opacity=20); opacity:0.2;
    
11. z-index:1001;
    
12. }
    
13. .topdiv {
    
14. display: none;
    
15. position: absolute;
    
16. top: 25%;
    
17. left: 25%;
    
18. width: 582px;
    
19. height: 450px;
    
20. padding: 16px;
    
21. border-top:solid,16px,red;
    
22. border-left:1px;
    
23. border-right:1px;
    
24. border-bottom:1px;
    
25. background-color: white;
    
26. z-index:1002;
    
27. overflow: auto;
    
28. }
    
29. </style>
    
30. <script type="text/javascript">
    
31. function showOrHide(flag) {
    
32. if(flag == 1) {
    
33. document.getElementById("top").style.display = "block";
    
34. document.getElementById("below").style.display = "block";
    
35. }
    
36. if(flag == 2) {
    
37. document.getElementById("top").style.display = "none";
    
38. document.getElementById("below").style.display = "none";
    
39. }
    
40. }
    
41. </script>
    
42. <div id="top" class="topdiv">
    
43. 当前坐标：[!--map_x--] – [!--map_y--] 缩放：[!--map_z--]   <a href = "javascript:void(0)" onclick ="showOrHide(2)">提交</a>
    
44. <div style="width:520px;height:340px;border:1px solid gray" id="container">
    
45. </div>
    
46. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0"></script>  //这里原来1.2版本我都改成2.0啦
    
47. 
    
48. <script type="text/javascript">
    
49. var map = new BMap.Map("container");
    
50. var point = new BMap.Point(115.449106, 38.887932);   //初始位置，这个可以改成你们城市的数据
    
51. map.addControl(new BMap.NavigationControl());  //鱼骨控件显示
    
52. map.enableScrollWheelZoom();
    
53. map.centerAndZoom(point, 14);   //初始缩放级别，上面map_z就是设置这里的初始数值的
    
54. // 获取经度  纬度
    
55. map.addEventListener("click", function(e){
    
56.    document.getElementById("map_x").value=e.point.lng;
    
57.   document.getElementById("map_y").value=e.point.lat;
    
58. //下面这行是点击提示语，需要可以去掉 "//"
    
59. //  alert("系统已记录您标注的位置坐标");
    
60. 
    
61. });
    
62. // 获取缩放
    
63. map.addEventListener("zoomend", function(){
    
64.   document.getElementById("map_z").value=this.getZoom();
    
65. });
    
66. // 设置个默认点，移动这个图标也可以获得坐标。不想要也可以删除
    
67. var point = new BMap.Point(115.487362, 38.868383);  // 默认标注图标位置，这里要改成你的城市位置
    
68. var marker = new BMap.Marker(point);        // 创建标注
    
69. map.addOverlay(marker);    // 将标注添加到地图中
    
70. 
    
71. var opts = {
    
72.   width : 250,     // 信息窗口宽度
    
73.   height: 100,     // 信息窗口高度
    
74.   title : "温馨提示"  // 信息窗口标题
    
75. }
    
76. var infoWindow = new BMap.InfoWindow("您可以移动此图标到您所在位置或点击您所在的位置，系统会自动获得坐标", opts);  // 创建信息窗口对象
    
77. 
    
78. marker.addEventListener("click", function(){
    
79.    this.openInfoWindow(infoWindow);
    
80. });
    
81. // 移动获取坐标
    
82. marker.enableDragging();
    
83. marker.addEventListener("dragend", function(e){
    
84.   document.getElementById("map_x").value=e.point.lng; //移动中心点改变坐标
    
85.   document.getElementById("map_y").value=e.point.lat;
    
86. //下面这行是移动坐标提示语，需要可以去掉 "//"
    
87. // alert("系统已记录您当前位置坐标：" + e.point.lng + ", " + e.point.lat + "");
    
88. });
    
89. 
    
90. </script>
    
91. 
    
92. </div>
    
93. 
    
94. <div id="below" class="belowdiv"></div>

复制代码

这样就可以把坐标和缩放级别存储于数据库了


第三步：内容页模板中调用： （这一步我没有测试哦）

1. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0"></script>
   
2. <div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
   
3. <script type="text/javascript">
   
4. var sContent =
   
5. "<h4 style='margin:0 0 5px 0;padding:0.2em 0′>[!--title--]</h4>" +
   
6. "<img style='float:right;margin:4px' id='imgDemo' src='[!--titlepic--]' width='139′ height='104′ title='[!--title--]'/>" +
   
7. "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em;width:320px;'>[!--smalltext--]…</p>" +
   
8. "</div>";
   
9. var map = new BMap.Map("container");
   
10. var point = new BMap.Point([!--map_x--], [!--map_y--]);
    
11. var marker = new BMap.Marker(point);
    
12. var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
    
13. 
    
14. map.centerAndZoom(point, [!--map_z--]);
    
15. map.addOverlay(marker);
    
16. 
    
17. marker.addEventListener("click", function(){
    
18. this.openInfoWindow(infoWindow);
    
19. //图片加载完毕重绘infowindow
    
20. document.getElementById('imgDemo').onload = function (){
    
21. infoWindow.redraw();
    
22. }
    
23. });
    
24. </script>

复制代码

很多单引号和双引号都是全角，我怀疑有人故意改的，因为不是所有的都是全角，而且是穿插在里面，然后让菜鸟搞半天搞不出来花钱找他修改，现在的人心哪。。。




至此，地图标注功能便做好了。


大家有问题可以留言，一起学习一起进步！