VUE项目使用高德地图进行精准定位高德地图API

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、高德地图API二、使用步骤1.引入key2.创建方法总结前言提示：以下是本篇文章正文内容，下面案例可供参考一、高德地图的准备工作1.注册高德地图管理者账号https://developer.amap.com/准备好key2.在index.html body中引入<script type="text/javascr

·夏野

2852人浏览 · 2021-03-04 17:07:44

·夏野 · 2021-03-04 17:07:44 发布

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、高德地图API
二、使用步骤
- 1.引入key
- 2.创建方法
总结

前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、高德地图的准备工作

1.注册高德地图管理者账号 https://developer.amap.com/ 准备好key

2.在index.html body中引入

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.13&key=your key"></script>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>高德地图定位</title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.13&key=your key"></script>
  </head>
  <body>
    <div id="app" style="width: 100vw; overflow-x: hidden;"></div>
  </body>
</html>

二、创建方法

1.methods

代码如下（示例）：

getlocation(){
      //获取定位
      let mapObj = new AMap.Map('iCenter', {
        resizeEnable: true
      });
      //添加AMap.Geolocation插件
      AMap.plugin('AMap.Geolocation', function () {
        //使用插件以及插件的配置
        var  geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000,
          // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
          buttonOffset: new AMap.Pixel(10, 20),
          //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          zoomToAccuracy: true,
          //  定位按钮的排放位置,  RB表示右下
          buttonPosition: 'RB'
        });
        geolocation.getCurrentPosition()
        AMap.event.addListener(geolocation, 'complete', onComplete)
        AMap.event.addListener(geolocation, 'error', onError)

        function onComplete (data) {
          // data是具体的定位信息
          console.log(data)
        }

        function onError (data) {
          // 定位出错
          console.log(data)
          getLngLatLocation()
        }
        const self = this;
        function getLngLatLocation() {
        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为对应的地理位置详细信息
                    console.log(status,result,data);
                  }
                });
              });
            }
          });
        });
      }
      });
    }