web端调用高德API

调用高德地图定位功能

废话不多说进入主题
↓↓↓↓↓↓↓↓↓↓↓↓↓
1、打开浏览器就如高德开放平台，登录账号、点击头像进入应用管理、点击创建应用、填写对应的名称和类型。
2、点击添加key会出现以下内容：
选定对应的信息，提交就会自动生成key
3、返回首页 点击开发支持，然后在点击地图JS API

4、点击准备把script标签复制到对应的html文件里

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 
//记得把申请的key替换

5、向下滑动进入定位页面，因为是浏览器定位，所以把对应的代码复制到JS里 可以删除没用的代码：如下

AMap.plugin('AMap.Geolocation', function() {
  var geolocation = new AMap.Geolocation({
    // 是否使用高精度定位，默认：true
    enableHighAccuracy: true,
  })

  geolocation.getCurrentPosition()
  AMap.event.addListener(geolocation, 'complete', onComplete)
  AMap.event.addListener(geolocation, 'error', onError)

  function onComplete (data) {
    // data是具体的定位信息
    console.log(data);//这里就是获取到的位置了
  }

  function onError (data) {
    // 定位出错
    
  }
})

注意：因为pc设备上大都缺少GPS芯片，所以在PC上的定位主要通过IP精准定位服务，该服务的失败率在5%左右。所以还需要在定位出错回调函数里处理一下。

function onError(data) {
   // 定位出错
   //注意this指向
    that.errLocation();
}

利用IP定位获取当前城市信息可以获取到一个大概的位置，把对应的代码复制到errLocation里

errLocation(){
	AMap.plugin('AMap.CitySearch', function () {
	  var citySearch = new AMap.CitySearch()
	  citySearch.getLocalCity(function (status, result) {
	    if (status === 'complete' && result.info === 'OK') {
	      // 查询成功，result即为当前所在城市信息，这里可以打印看一下
	      console.log(result);
	    }
	  })
	})
}

然后进入地理编码与逆地理编码页面，把正向地理编码方法的代码复制到成功获取信息的函数里，如下：

errLocation() {
      let that = this;
      AMap.plugin("AMap.CitySearch", function() {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function(status, result) {
          if (status === "complete" && result.info === "OK") {
            // 查询成功，result即为当前所在城市信息
            console.log(result);
            AMap.plugin("AMap.Geocoder", function() {
              var geocoder = new AMap.Geocoder({
                // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                //注意这里记得修改
                city: result.adcode
              });
              
				//还有这里
              var lnglat = result.rectangle.split(";")[0].split(",");
														//这里
              geocoder.getAddress(lnglat, function(status, data) {
              								//这里
                if (status === "complete" && data.info === "OK") {
                  // result为对应的地理位置详细信息
                  that.location = data.regeocode.formattedAddress
                }
              });
            });
          }
        });
      });
    }

这样就可以了。
看一下成果（刚好我就是那百分之5的概率，定位出错了，所以真实位置bu准确）：

以上！！！！！！！