Vue Cli4 使用高德地图定位 获取当前经纬度信息以及周边定位

以上是最终效果图 下面开始代码分享

第一步 在index,html引入高德地图模块

 `    
    `

第二步 在Vue.config中配置

  configureWebpack: {
    externals: {
      AMap: 'AMap', // 高德地图配置
      AMapUI: 'AMapUI'
    }
  }

注意 配置完Vue.Config.js 记得 run dev
只要以上配置完成 在打开页面的时候就会自动引入高德地图了

第三步 在你页面需要显示地图的地方 创建地图显示容器

   <div id="container">
        <div @click="setCenter" class="center-icon">
          <img src="../assets/定位图标@2x.png" alt="" />
        </div>
      </div>

第四步 初始化地图实例对象

      // 地图实例对象 （amap 为容器的id）
      this.amap = new window.AMap.Map('container', {
        resizeEnable: true,
        zoom: 15
      })
      // 注入插件（定位插件，地理编码插件）
      this.amap.plugin(['AMap.Geolocation', 'AMap.Geocoder'])
      // 定位
      this.currentPosition(this.amap)

第五步 定位当前位置

   // 没有传入坐标点，则定位到当前所在位置
        const geolocation = new window.AMap.Geolocation({
          enableHighAccuracy: true,
          timeout: 10000,
          zoomToAccuracy: true,
          buttonPosition: 'RB'
        })
        geolocation.getCurrentPosition((status, result) => {
          if (status === 'complete') {
            const points = [result.position.lng, result.position.lat]
            map.setCenter(points) // 设置中心点
            this.addMark(map, points) // 添加标记

            // 存下坐标与地址
            this.point = points
            this.longitude = points[0]
            this.latitude = points[1]
            this.getAddress(points)
          } else {
            console.log('定位失败', result)
          }
        })

第六步 添加地图控件

 addMark (map, points) {
      const marker = new window.AMap.Marker({
        map: map,
        position: points,
        draggable: true, // 允许拖动
        cursor: 'move',
        raiseOnDrag: true
      })
      marker.on('dragend', e => {
        const position = marker.getPosition()

        // 存下坐标与地址
        this.point = [position.lng, position.lat]
        this.getAddress([position.lng, position.lat])
      })
    }

第七步 地址逆解析

    // 根据坐标返回地址(逆地理编码，获取详细地址)
    getAddress (points) {
      const geocoder = new window.AMap.Geocoder({
        radius: 1000
      })
      geocoder.getAddress(points, (status, result) => {
        if (status === 'complete' && result.regeocode) {
          this.address = result.regeocode.formattedAddress
          // console.log('当前经纬度：' + points)
          // console.log('当前详细地址：' + this.address)
          // 在这里请求周边数据点
          this.getOrundPosition(points[0], points[1])
        }
      })
    },

以上配置完成后 就会显示图一的效果了 如果大家只是想获取当前经纬度信息 可以参考下面代码

 // 获取经纬度信息
    getLocation () {
      const _this = this
      const AMap = window.AMap
      AMap.plugin('AMap.Geolocation', function () {
        var geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000
        })

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

        function onComplete (data) {
          console.log('定位成功纬度信息：', data.position.lat)
          console.log('定位成功经度信息：', data.position.lng)
          _this.latitude = data.position.lat
          _this.longitude = data.position.lng
          // 把经纬度信息保存到VUEx
          _this.$store.dispatch('saveLongLat', [data.position.lng, data.position.lat])

          _this.getmarketposition()
        }
        function onError (data) {
          // console.log('定位失败错误：', data)
          _this.getmarketposition()
        }
      })
    }

这里特别要注意一下 一定要使用ie浏览器才能定位！！！
好了，以上就是vue使用高德地图整个流程 本人分享出来是避免采坑 如有不懂的可以评论区留言 ！