高德地图在网页开发中的简单使用

使用步骤

Demo代码位置:https://github.com/BeHappyWsz/map.git

1. 页面布局
   地图渲染位置
   

   <div id="map" style="width: 800px;height: 500px;"></div>

   简单的查询
   

   <fieldset>
      <legend>查找</legend>
      <table>
         <tr>
            <td>位置</td>
            <td><input type="text" id="where" name="where"/></td>
            <td><input type="button" οnclick="search()" value="查找"></td>
         </tr>
      </table>
   </fieldset>

   查询点击事件与初始展示
   

   <script type="text/javascript">
      function search() {
          var where = $("#where").val();
              //开始加载地图
         mapInit(where);
          }
          //开始加载地图
          setTimeout(function(){
              mapInit();
          },1000);
   </script>

   
   
2. 引入JS
   

   <script type="text/javascript" 
            src="http://webapi.amap.com/maps?v=1.3&key=4cd4432fbd2ad98b1102db6d1c3b0227"></script>
   <script src="/js/jquery-3.2.1.min.js"></script>
   <script src="/js/map.js"></script>

   
   
3. 核心map.js
   

   var mapObj;
   var marker = new Array();
   var windowsArr = new Array();
   function mapInit(data) {
       mapObj = new AMap.Map("map");//绑定页面渲染位置
       var MSearch;
       mapObj.plugin(["AMap.PlaceSearch"], function() {     
           MSearch = new AMap.PlaceSearch({ //构造地点查询类
               pageSize:10,
               pageIndex:1,
               city:"021", //城市021上海
               level:15
           }); 
           AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//返回地点查询结果
           MSearch.search(data); //关键字查询
       });
   }
   function keywordSearch_CallBack(data) {
       var poiArr = data.poiList.pois;
       var resultCount = poiArr.length;
       for (var i = 0; i < resultCount; i++) {
          addmarker(i, poiArr[i]);
       }
       mapObj.setFitView();
   }
   function addmarker(i, d) {
       var lngX = d.location.getLng();
       var latY = d.location.getLat();
       var markerOption = {
          map:mapObj,
           icon:"http://webapi.amap.com/images/" + (i + 1) + ".png",
           position:new AMap.LngLat(lngX, latY)
       };
       var mar = new AMap.Marker(markerOption);          
       marker.push(new AMap.LngLat(lngX, latY));
   
       var infoWindow = new AMap.InfoWindow({
          content:"<h3><font color=\"#00a6ac\">&nbsp;&nbsp;" + (i + 1) + ". " + d.name + "</font></h3>" + TipContents(d.type, d.address, d.tel),
           size:new AMap.Size(300, 0), 
           autoMove:true,  
         offset:new AMap.Pixel(0,-30)
       });
       windowsArr.push(infoWindow); 
       var aa = function (e) {infoWindow.open(mapObj, mar.getPosition());};
      AMap.event.addListener(mar, "click", aa);
   }
   function TipContents(type, address, tel) {  //窗体内容
       if (type == "" || type == null || typeof(type) == "undefined") {
           type = "暂无";
       }
       if (address == "" || address == null || typeof(address) == "undefined") {
           address = "暂无";
       }
       if (tel == "" || tel == null || typeof(address) == "tel") {
           tel = "暂无";
       }
       var str = "&nbsp;&nbsp;地址：" + address + "<br />&nbsp;&nbsp;电话：" + tel + " <br />&nbsp;&nbsp;类型：" + type;
       return str;
   }

   
   
4. 效果展示