vue 高德地图搜索功能_vue中实现高德定位功能

一、获取key及在index.htm中引入

首先需要成为高德开发者，申请到适合项目的key.并在index.html中进行引入

二、在配置文件中进行相应配置

根据vue脚手架的不用需要在不同的文件中进行配置。

我项目使用的是cli3的脚手架，需要在vue.config.js中进行高德地图配置

externals: {

'amap': 'amap' // 高德地图配置

}

三、在需要用到的地方进行地图初始化及定位操作

因项目需求只需要在注册页面进行默认定位，故只引用一次就行。并没有单独的抽离出来，可以根据项目的需求进行抽离。

import amap from "amap"; // 引入高德地图

data() {

// debugger

return {

locationdata: {

// 用于定位相关信息提交

lat: "", // 纬度

lon: "", // 经度

province: "", // 省

city: "", // 市

district: "", // 区 县

nowplace: "", // 省-市-区

address: "" // 详细地址

}

};

},

methods:{

getlocation() {

const self = this;

ama