高德地图在网页开发中的简单使用方法_高德地图如何使用

使用步骤

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. 效果展示
   

今天的文章高德地图在网页开发中的简单使用方法_高德地图如何使用分享到此就结束了，感谢您的阅读。