高德地图定位

最新推荐文章于 2025-05-27 17:03:00 发布

mason舟

最新推荐文章于 2025-05-27 17:03:00 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_27483091/article/details/120305841

js 专栏收录该内容

13 篇文章

订阅专栏

//在index.html页面引入

<script src="http://webapi.amap.com/maps?v=1.3&key=高德地图的key"></script>

配置外置引入，不会被打包进项目包
externals: {

    'AMap': 'AMap'

 },

//在组件页面引入
import AMap from 'AMap'

// 开始定位方法
    readyPosition(){
      let _this = this
      let map,geolocation
      map = new AMap.Map('iCenter')
      map.plugin('AMap.Geolocation', function() {
        
        geolocation = new AMap.Geolocation({
          timeout: 1000, //若在指定时间内未定位成功，返回超时错误信息“TIMEOUT”
          GeoLocationFirst: true, //默认为false，设置为true的时候可以调整PC端为优先使用浏览器定位，失败后使用IP定位
          maximumAge: 0, //定位结果缓存0毫秒，默认：0
          extensions: 'base' //将得到的经纬度进行逆地理编码后获取地址信息
        });
        map.addControl(geolocation)
        geolocation.getCurrentPosition()
        AMap.event.addListener(geolocation, 'complete', function(data) {
          let addComp = data.addressComponent
          _this.posProvice = addComp.province
          _this.posCity = addComp.city
          _this.district = addComp.district
          _this.street = addComp.township
          //利用vuex设置公共值，然后用localStorage存储省市区街道到本地
          _this.setUserInfo({ positionProvice: _this.posProvice })
          _this.setUserInfo({ positionCity: _this.posCity })
          _this.setUserInfo({ positionDistrct: _this.district })
          _this.setUserInfo({ positionStreet: _this.street })
          //判断当前是否选择了区、街道
          if(_this.userInfo.selectDistrct=='' || _this.userInfo.selectDistrct==undefined){
            _this.areaStreet = _this.district+""+_this.street
          }else{
            _this.areaStreet =    _this.userInfo.selectDistrct+""+_this.userInfo.selectStreet
          }
          //定位城市
          if (_this.posCity != _this.userInfo.selectCity) {
            _this.$refs.positionCity.show()
          }
        }); //返回定位信息
        AMap.event.addListener(geolocation, 'error', function(data) {
          if (data.info == 'FAILED') {
            // _this.prompt('获取您当前位置失败')
          }
        });
      });
    },