给帝国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>

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

<style>
  .belowdiv{display: none;position: absolute;top: 0%;left: 0%;width: 100% !important; width:100%;height: 100% !important; _height:1024px;background-color: gray;filter:alpha(opacity=20); opacity:0.2;z-index:1001;}
  .topdiv {display: none;position: absolute;top: 25%;left: 25%;width: 582px;height: 450px;padding: 16px;border-top:solid,16px,red;border-left:1px;border-right:1px;border-bottom:1px;background-color: white;z-index:1002;overflow: auto;}
</style>
<script type="text/javascript">
  function showOrHide(flag) {
  if(flag == 1) {
  document.getElementById("top").style.display = "block";
  document.getElementById("below").style.display = "block";
  }
  if(flag == 2) {
  document.getElementById("top").style.display = "none";
  document.getElementById("below").style.display = "none";
  }
  }
</script>
<div id="top" class="topdiv">
  当前坐标：[!--map_x--] – [!--map_y--] 缩放：[!--map_z--] &nbsp;&nbsp;<a href = "javascript:void(0)" onclick = "showOrHide(2)">提交</a>
  <div style="width:520px;height:340px;border:1px solid gray" id="container">
</div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
  <script type="text/javascript">
  var map = new BMap.Map("container");
  var point = new BMap.Point(115.449106, 38.887932);   //初始位置，我这个是保定可能是css原因，这个坐标位置偏移一点
  map.addControl(new BMap.NavigationControl());  //鱼骨控件显示
  map.enableScrollWheelZoom();
  map.centerAndZoom(point, 14);   //初始缩放级别
  // 获取经度  纬度
  map.addEventListener("click", function(e){
  document.getElementById("map_x").value=e.point.lng;
  document.getElementById("map_y").value=e.point.lat;
  //下面这行是点击提示语，需要可以去掉 "//"
  //  alert("系统已记录您标注的位置坐标");
  });
  // 获取缩放
  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>
</div>
<div id="below" class="belowdiv"></div>

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

第三步：内容页模板中调用：

<script type=”text/javascript” src=”http://api.map.baidu.com/api?v=1.2″></script>
  <div style=”width:520px;height:340px;border:1px solid gray” id=”container”></div>
  <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>” +
  “</div>”;
  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>

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