[原创]百度地图自动标注方法帝国cms - 安全、强大、稳定、灵活

帝国论坛 → 帝国网站管理系统交流区 → 模板/标签/插件共享交流 → [原创]百度地图自动标注方法

【本版专题贴子】

1/6 1 2 3 4 5 6 ›› ›|

hzhq001
用户头衔：书生

精华贴   ：0
发贴数   ：6
经验值   ：36
注册时间：2009-05-17

信息

搜索

好友

发送悄悄话

【精益求精－帝国网站管理系统7.5正式版开源发布】 [第 1 楼]

[原创]百度地图自动标注方法

1.先在系统模版新建字段 diduan  地段后面该打的全部打勾
2.到管理模板变量  增加模板变量  变量名：[!--temp.ditu--]  变量标识:百度地图标注
3.变量值加入以下代码
--------------------------------------这条不要复制----------------------------------------
<!doctype html>
<html>
<head>
      <meta http-equiv="Content-Type" content="text/html; charset=uft-8">
      <title>采集坐标 </title>
      
   <style>
         #preview{
            border: 1px solid #bfd2e1;
            width: 250px;
            height: 250px;
            font-family: Arial, Helvetica, sans-serif,"宋体";
         }
         #map_container{
            height: 250px;
         }
         #float_search_bar{
            z-index: 2012;
            position: absolute;
            width: 180px;
            height: 31px;
            background: url("http://dev.baidu.com/wiki/static/map/tuan/images/search_bar.png") repeat-x;
            background-position: 0 -21px;
            padding: 3px 0 0 10px;
         }
         #float_search_bar label, #float_search_bar span{
            color: #0787cb;
            font-size: 14px;
         }
         #float_search_bar input{
            width: 180px;
            height: 16px;
            margin-top: 1px;
         }
         #float_search_bar input:focus{
            outline: none;
         }
         #float_search_bar button{
            border: 0;
            color: white;
            width: 77px;
            height: 20px;
            background: url("http://dev.baidu.com/wiki/static/map/tuan/images/search_bar.png") no-repeat;
            background-position: 0 0;
            margin-right: 5px;
            cursor: pointer;
         }
      </style>
</head>

<body>
<div id="preview">
      <div id="float_search_bar">
         <label>区域：</label>
         <input type="text" id="keyword" />
         <button id="search_button">查找</button>
         <span>点击地图或标注获取坐标</span>
      </div>
      <div id="map_container"></div>
</div>
<div id="result" style="margin-top: 4px;"></div>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript">
      function getUrlParas(){
         var hash = location.hash,
            para = {},
            tParas = hash.substr(1).split("&");
         for(var p in tParas){
            if(tParas.hasOwnProperty(p)){
                  var obj = tParas[p].split("=");
                  para[obj[0]] = obj[1];
            }
         }
         return para;
      }
      var para = getUrlParas(),
         center = para.address?decodeURIComponent(para.address) : "[!--diduan--]",
         city = para.city?decodeURIComponent(para.city) : "[!--diqu--]";

      document.getElementById("keyword").value = center;

      var marker_trick = false;
      var map = new BMap.Map("map_container");
      map.enableScrollWheelZoom();

      var marker = new BMap.Marker(new BMap.Point(116.404, 39.915), {
         enableMassClear: false,
         raiseOnDrag: true
   });
      marker.enableDragging();
      map.addOverlay(marker);

      map.addEventListener("click", function(e){
         if(!(e.overlay)){
            map.clearOverlays();
            marker.show();
            marker.setPosition(e.point);
            setResult(e.point.lng, e.point.lat);
         }
      });
      marker.addEventListener("dragend", function(e){
         setResult(e.point.lng, e.point.lat);
      });

      var local = new BMap.LocalSearch(map, {
         renderOptions:{map: map},
   pageCapacity: 1
      });
      local.setSearchCompleteCallback(function(results){
         if(local.getStatus() !== BMAP_STATUS_SUCCESS){
            alert("无结果");
         } else {
      marker.hide();
   }
      });
      local.setMarkersSetCallback(function(pois){
         for(var i=pois.length; i--; ){
            var marker = pois[i].marker;
            marker.addEventListener("click", function(e){
                  marker_trick = true;
                  var pos = this.getPosition();
                  setResult(pos.lng, pos.lat);
            });
         }
      });

      window.onload = function(){
         local.search(center);
         document.getElementById("search_button").onclick = function(){
            local.search(document.getElementById("keyword").value);
         };
         document.getElementById("keyword").onkeyup = function(e){
            var me = this;
            e = e || window.event;
            var keycode = e.keyCode;
            if(keycode === 9){
                  local.search(document.getElementById("keyword").value);
            }
         };
      };
      function a(){
         document.getElementById("float_search_bar").style.display = "none";
      }
      a();
      /*
      * setResult : 定义得到标注经纬度后的操作
      * 请修改此函数以满足您的需求
      * lng: 标注的经度
      * lat: 标注的纬度
      */
      function setResult(lng, lat){
         document.getElementById("result").innerHTML = lng + ", " + lat;
      }
</script>
</body>
</html>
-------------------------------------------结束这条不要复制---------------------------------------
4.到需要加入地图的内容模版加入代码：[!--temp.ditu--]

效果图：

上传以下图片：