【高德地图API 项目实战】

一、项目背景

初衷

最近的一个项目中使用到了高德地图，分别在PC端和小程序端均有涉及，使用到了高德地图的两种服务平台：1、Web服务；2、Web端JS API。如果你所做的项目正好也考虑使用高德地图API，希望能对你有帮助。

项目应用场景

小程序端：

服务平台选择Web服务，通过用户经纬度，调用高德地图-逆地理编码 API，实现经纬度转化为地址的功能。

PC端：

服务平台选择Web端JS API，选择省市区，并填写详细地址获取经纬度。

二、具体实现

1、高德地图：Web服务

逆地理编码

// 高德地图API接口
https://restapi.amap.com/v3/geocode/regeo?location=116.473195,39.993253&key=<用户的key>

// 接口返回成功示例
{
    "status": "1",
    "regeocode": {
        "addressComponent": {
            "city": [],
            "province": "北京市",
            "adcode": "110105",
            "district": "朝阳区",
            "towncode": "110105026000",
            "streetNumber": {
                "number": "10号",
                "location": "116.473083,39.993252",
                "direction": "西",
                "distance": "9.53763",
                "street": "阜荣街"
            },
            "country": "中国",
            "township": "望京街道",
            "businessAreas": [
                {
                    "location": "116.470293,39.996171",
                    "name": "望京",
                    "id": "110105"
                }
            ],
            "building": {
                "name": "新一城购物中心",
                "type": "购物服务;商场;购物中心"
            },
            "neighborhood": {
                "name": [],
                "type": []
            },
            "citycode": "010"
        },
        "formatted_address": "北京市朝阳区望京街道新一城购物中心首开广场"
    },
    "info": "OK",
    "infocode": "10000"
}

2、高德地图:Web端JS API

a、引入script代码

// 替换对应的key和安全密钥

<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: "{$gd_map_secret_js}",
    };
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key={$gd_map_key_js}"></script>

b、初始化地图

// 初始化地图
init: function (init_lat, init_log) {
   var lat = 39.9088;
   var log = 116.3987;
   if(init_log && init_lat){
       log = init_log;
       lat = init_lat;
   }

   center = new AMap.LngLat(log, lat);

   map = new AMap.Map("map-container", {
       // 设置地图容器id
       viewMode: "3D", // 是否为3D地图模式
       zoom: 11, // 初始化地图级别
       center: center, // 初始化地图中心点位置
   });

   map = new AMap.Map("map-container", {
       center: center,     //设置中心位置
       zoom:14,            //设置地图缩放级别
   });

   if(init_log && init_lat){
       marker = new AMap.Marker({
           position:center,
           map:map,
       });
   }
   obj.click_map();
   obj.search_map();
},
// 点击地图位置获取经纬度
click_map:function () {
   //地址和经纬度之间进行转换服务
   map.on('click', function (event){
       $("input[name='longitude']").val(event.lnglat.lng);
       $("input[name='latitude']").val(event.lnglat.lat);

       var geocoder;
       var lnglatXY = new AMap.LngLat(event.lnglat.getLng(), event.lnglat.getLat());
       //加载地理编码插件
       map.plugin(["AMap.Geocoder"], function() { //加载地理编码插件
           geocoder = new AMap.Geocoder({
               radius: 1000, //以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息
               extensions: "all"//返回地址描述以及附近兴趣点和道路信息，默认"base"
           });

           //返回地理编码结果
           AMap.Event.addListener(geocoder, "complete", function (e) {
               console.log(e.regeocode);
               $("input[name='address']").val(e.regeocode.formattedAddress);
           });
           //逆地理编码
           geocoder.getAddress(lnglatXY);
       });
   });
},

// 搜索地图
search_map:function () {
   $(document).on('click', '#searchMap', function() {
       var province_id = $("#province");
       var city_id = $("#city");
       var district_id = $("#district");
       var shop_address = $("input[name='address']").val();

       if(province_id.val() === null){
           layer.open({icon:2,time:2000,content:"请选择省份"});
           return;
       }
       if(city_id.val() === null){
           layer.open({icon:2,time:2000,content:"请选择市"});
           return;
       }
       if(district_id.val() === null){
           layer.open({icon:2,time:2000,content:"请选择镇/区"});
           return;
       }
       address = province_id.find("option:selected").text() + city_id.find("option:selected").text() + district_id.find("option:selected").text() + shop_address;

       map.plugin(['AMap.PlaceSearch'], function() {
           var PlaceSearchOptions = { //设置PlaceSearch属性
               city: "北京", //城市
               type: "", //数据类别
               pageSize: 10, //每页结果数,默认10
               pageIndex: 1, //请求页码，默认1
               extensions: "base" //返回信息详略，默认为base（基本信息）
           };
           var MSearch = new AMap.PlaceSearch(PlaceSearchOptions); //构造PlaceSearch类
           AMap.Event.addListener(MSearch, "complete", function(results){
               var pois = results.poiList.pois;

               for(var i = 0,l = pois.length;i < l; i++){
                   var poi = pois[i];
                   map.setZoomAndCenter(15, [poi.location.lng, poi.location.lat]);
               }
           }); //返回结果
           MSearch.search(address); //关键字查询
       });
   })
}

实现效果

小结

此篇文章主要是从高德地图API的使用上来进行整理，高德地图的API是统一的，针对小程序和PC后台的功能界面，不同产品形态界面交互虽然是有区别的，但是调用API的方式是统一的，万变不离其宗。