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

给任意模型加上百度地图标注功能。

第一步：首先在模型建立三个字段：
字段名：map_x 字段类型：DOUBLE
字段名：map_y 字段类型：DOUBLE
字段名：map_z 字段类型：TINYINT 最好设置个默认值13 14左右，是调整缩放级别的
系统模型该选的都选上，比如录入项、投稿项、可增加、可修改、内容模版。

第二步：修改系统模型表单模版

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

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

然后在底部添加以下代码：

});
// 获取缩放
map.addEventListener("zoomend", function(){
document.getElementById("map_z").value=this.getZoom();
});
// 设置个默认点，移动这个图标也可以获得坐标。不想要也可以删除
var point = new BMap.Point(115.487362, 38.868383); // 默认标注图标位置
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中

var opts = {
width : 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "温馨提示" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("您可以移动此图标到您所在位置或点击您所在的位置，系统会自动获得坐标", opts); // 创建信息窗口对象

marker.addEventListener("click", function(){
this.openInfoWindow(infoWindow);
});
// 移动获取坐标
marker.enableDragging();
marker.addEventListener("dragend", function(e){
document.getElementById("map_x").value=e.point.lng; //移动中心点改变坐标
document.getElementById("map_y").value=e.point.lat;
//下面这行是移动坐标提示语，需要可以去掉 "//"
// alert("系统已记录您当前位置坐标：" + e.point.lng + ", " + e.point.lat + "");
});

</script>

</p>

<p id="below" class="belowp"></p> 这样就可以把坐标和缩放级别存储于数据库了第三步：内容页中调用：
<script type=”text/javascript” src=”http://api.map.baidu.com/api?v=1.2″></script>
<p style=”width:520px;height:340px;border:1px solid gray” id=”container”></p>
<script type=”text/javascript”>
var sContent =
“<h4 style=’margin:0 0 5px 0;padding:0.2em 0′>[!--title--]</h4>” +
“<img style=’float:right;margin:4px’ id=’imgDemo’ src=’[!--titlepic--]‘ width=’139′ height=’104′ title=’[!--title--]‘/>” +
“<p style=’margin:0;line-height:1.5;font-size:13px;text-indent:2em;width:320px;’>[!--smalltext--]…</p>” +
“</p>”;
var map = new BMap.Map(“container”);
var point = new BMap.Point([!--map_x--], [!--map_y--]);
var marker = new BMap.Marker(point);
var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象

map.centerAndZoom(point, [!--map_z--]);
map.addOverlay(marker);

marker.addEventListener(“click”, function(){
this.openInfoWindow(infoWindow);
//图片加载完毕重绘infowindow
document.getElementById(‘imgDemo’).onload = function (){
infoWindow.redraw();
}
});
</script>

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