發布時間：2019-11-02 來源：未知 瀏覽： 關鍵詞：

給帝國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>

 至此，地圖標注功能便做好了。