前端高德地图api使用

113 阅读 0 评论 75 点赞

我是靠谱客的博主幸福音响，这篇文章主要介绍前端高德地图api使用，现在分享给大家，希望可以做个参考。

高德api使用

1，初始化地图
1)，高德官网申请key引入对应的高德地图包
2)，初始化

复制代码

1
2
3
4
5
6
7
 window.init = function(){
        var map = new AMap.Map('container', {
           center:[117.000923,36.675807],
           zoom:11
        });
    }

复制代码

1
2
ps：必须为地图的容器设置宽高

2，获取对应的要用的组件（以地理编码为例）

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
AMap.plugin('AMap.Geocoder', function() {
  var geocoder = new AMap.Geocoder({
    // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
    city: '010'
  })

  geocoder.getLocation('北京市海淀区苏州街', function(status, result) {
    if (status === 'complete' && result.info === 'OK') {
      // result中对应详细地理坐标信息
    }
  })
})

3，注意点（就H5项目来说）
1）微信7.0以上版本对https升级了限制，并且IOS10以上也可能会有问题（具体表现我还没遇到），所有用http访问定位服务的请求都会失败。
解决办法：做兼容，移动端统一采用微信api。这又产生第二个问题
2）微信api提供的定位，有用的值只有经纬度坐标！城市名，省市区都没有。目前我的需求是必须显示出当前坐标的城市名（如果你的需求里面没有就没必要往下看了）。
解决办法：其实也不算是大坑。你遇到绝大部分问题，总有前辈遇到过。高德这时候就很温馨了，提供了组件’AMap.Geocoder’帮你解决，利用坐标来获取当前的所在地

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 AMap.plugin('AMap.Geocoder',function(){
     geocoder = new AMap.Geocoder({
        city: ""//城市，默认：“全国”
     });
     // 具体传参自己看下高德api
     var lnglatXY=[坐标];//地图上所标点的坐标（顺序忘了，嘻嘻嘻）
     geocoder.getAddress(lnglatXY, function(status, res) {
     	var city = res.regeocode.addressComponent.city;
        location.city_code = res.regeocode
        self.set({
            cityName: city,
            locationInfo: location
        })
     });
})