vue 项目中引入 高德地图

第一步 ： 现在高德地图的官网上申请key

第二部 ： 在index.html中引入

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

 第三步 ： 新建一个map.js

/**

 * 高德地图定位

 * @type {{}}

 */

export const location = {

    initMap (id) {

      let mapObj = new AMap.Map(id, {})

      let geolocation;

      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()

      })

      return geolocation 

    }

  }

第四步：在你需要获取位置信息的页面（home.vue）

import {location } from 'map.js'

methods ：{

refreshBtn(){
let _that = this;
let geolocation = location.initMap("map-container"); //定位
AMap.event.addListener(geolocation, "complete", result => {
let data = {
"user_id": "systemId", //赋值systemId，必须
"eventTypeId": api.global.eventTypeId,
"longitude": result.position.lng, //类型：Number 必有字段 备注：经度
"latitude": result.position.lat
}
api.queryRecentProject(data).then(res=> {
if(res.data.Result == 'success'){
_that.projectName = res.data.Item.project_local_name
}
})
});

},
}