[1] Vue.js 学习笔记 – Vue 调用高德地图 API

准备写一下天气预报的项目,需要用到定位,就想着调用地图 API 然后就有了这篇笔记

使用的是高德的 javascript-api 文档地址:https://lbs.amap.com/api/javascript-api/reference/location

API key 申请地址:http://lbs.amap.com/dev/key/app

0.引入

首先引入,直接在入口 index.html 的头部直接引入即可

<script src="https://webapi.amap.com/maps?v=1.4.15&key=xxxxxx"></script>
如图:

1.说明

建议写入 mixin.js 然后再调用

官方的代码示例:

mapObj = new AMap.Map('iCenter');
mapObj.plugin('AMap.Geolocation', function () {
  geolocation = new AMap.Geolocation({
    enableHighAccuracy: true,//是否使用高精度定位,默认:true
    timeout: 10000, //超过10秒后停止定位,默认:无穷大
    maximumAge: 0, //定位结果缓存0毫秒,默认:0
    convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
    showButton: true, //显示定位按钮,默认:true
    buttonPosition: 'LB', //定位按钮停靠位置,默认:'LB',左下角
    buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
    showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true
    showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true
    panToLocation: true,  //定位成功后将定位到的位置作为地图中心点,默认:true
    zoomToAccuracy:true  //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
  });
  mapObj.addControl(geolocation);
  geolocation.getCurrentPosition();
  AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
  AMap.event.addListener(geolocation, 'error', onError);  //返回定位出错信息
});

在 Vue CLI 4(或其它版本) 中当你复制到 Vue 的时候会发现 AMap 会报错,因为使用 AMap 这个构造函数需要通过在 vue.config.js 中配置:

module.exports = {
  configureWebpack: {
    externals: {
      AMap: 'AMap' // 高德地图配置
    }
  }
}

这样就可以愉快的玩耍了~

2.调用

新建 mixin.js 文件,代码如下:

import AMap from 'AMap'

export const AmapMixin = {
  methods: {
    getLocation() {
      AMap.plugin('AMap.Geolocation', function () {
        const geolocation = new AMap.Geolocation({
          // 是否使用高精度定位,默认:true
          enableHighAccuracy: true,
          // 设置定位超时时间,默认:无穷大
          timeout: 5000
        })
        geolocation.getCurrentPosition()
        AMap.event.addListener(geolocation, 'complete', data => {
          console.log('具体的定位信息', data)
          console.log('lat', data.position.lat)
          console.log('lng', data.position.lng)
        })
        AMap.event.addListener(geolocation, 'error', data => {
          // 失败 启用 ip定位
          AMap.plugin('AMap.CitySearch', function () {
            var citySearch = new AMap.CitySearch()
            citySearch.getLocalCity(function (status, result) {
              if (status === 'complete' && result.info === 'OK') {
                // 查询成功,result即为当前所在城市信息
                console.log('通过ip获取当前城市:', result)
                console.log('lat', result.position.lat)
                console.log('lng', result.position.lng)
              }
            })
          })
        })
      })
    }
  }
}

因为我只需要获取经纬度的信息,所以官方文档中的

mapObj = new AMap.Map('iCenter');
xxxx
mapObj.addControl(geolocation);
xxx

就不需要了,最后只需要引入 mixin.js 和在 mounted 中使用 this.getLocation() 就可以调用了

<template>
  <div class="home">
    Home
  </div>
</template>

<script>
  import { AmapMixin } from '../common/mixin'

  export default {
    name: 'Home',
    mixins: [AmapMixin],
    mounted() {
      this.getLocation()
    }
  }
</script>
可以看到是成功的


完结撒花~ yeah

参考:https://segmentfault.com/a/1190000012344678

发表评论

设为私密评论(仅博主可见)
No Comment