效果

第一步:首先我们先去高德地图开放平台申请一个Key

第二步:

需要安装地图插件

<code>npm install vue-amap --save

第三步:

// 引入vue-amap

import VueAMap from 'vue-amap'

Vue.use(VueAMap)

VueAMap.initAMapApiLoader({

key: '你的Key', // key

plugin: [

'AMap.Geolocation', //定位空间，用来获取和展示用户主机所在的经纬度位置

' AMap.Autocomplete ', //输入提示插件

' AMap.PlaceSearch ', //POI搜索插件

' AMap.Scale ', //右下角缩略图插件，比例尺

' AMap.OverView ', //地图鹰眼插件

' AMap.ToolBar ', //地图工具条

' AMap.MapType ', //类别切换空间，实现默认图层与卫星图，实施交通层之间切换的控制

' AMap.PolyEditor ', //编辑 折线多边形

' AMap.CircleEditor ',

"AMap.Geocoder", //地图编码

'AMap.AMapManager',

'AMap.Marker'

],

// 高德 sdk 版本，默认为 1.4.4

v: '1.4.4',

uiVersion: '1.0' //ui版本

})

//高德的安全密钥

window._AMapSecurityConfig = {

securityJsCode: '你的密钥',

}

添加标签

<div style="border: 1px solid #cccccc">code>

<!-- //搜索框 -->

<el-amap-search-box

id="search"code>

:search-option="searchOption"code>

:on-search-result="onSearchResult"code>

/>

<!-- 地图 -->

<el-amap

class="amap-box"code>

:zoom="amap.zoom"code>

:center="amap.center"code>

:plugin="amap.plugin"code>

:events="amap.events"code>

>

<!-- 当前位置图标 -->

<el-amap-marker

v-for="(marker, index) in amap.markers"code>

:key="'marker' + index"code>

:position="marker.position"code>

/>

<!-- 位置名称显示 -->

<el-amap-text

v-for="(marker, index) in amap.markers"code>

:key="'text' + index"code>

:text="marker.text"code>

:offset="marker.offset"code>

:position="marker.position"code>

/>

</el-amap>

</div>

数据源:

export default {

name: "vehicleSpotInspection",

data() {

const vm = this;

return {

address: "",//需要传给后端的字段

// form对象

dataForm: getFormData(),

// 地图搜索对象

searchOption: {

city: "全国",

citylimit: true,

},

lng: 0,

lat: 0,

// 地图对象

amap: {

zoom: 16,

center: [116.319802, 39.98294],

events: {

// 点击获取地址的数据

click(e) {

const { lng, lat } = e.lnglat;

vm.dataForm.lon = lng;

vm.dataForm.lat = lat;

// 这里通过高德 SDK 完成。

var geocoder = new AMap.Geocoder({

radius: 100,

extensions: "all",

});

geocoder.getAddress([lng, lat], function (status, result) {

if (status === "complete" && result.info === "OK") {

if (result && result.regeocode) {

console.log("点击获取地址的数据", result);

vm.dataForm.orgAddr = result.regeocode.formattedAddress;

vm.dataForm.province =

result.regeocode.addressComponent.province;

vm.dataForm.city = result.regeocode.addressComponent.city;

vm.dataForm.district =

result.regeocode.addressComponent.district;

vm.dataForm.lat = lat ? lat.toString() : "";

vm.dataForm.lon = lng ? lng.toString() : "";

vm.amap.markers = [];

const obj = {

position: [lng, lat],

text: result.regeocode.formattedAddress,

offset: [0, 30],

};

vm.amap.markers.push(obj);

vm.sure();

}

}

});

// this.$nextTick().then(() => {

// // 在这里执行你需要在 DOM 更新后执行的代码

// });

},

},

plugin: [

{

// 定位

pName: "Geolocation",

events: {

init(o) {

// o是高德地图定位插件实例

o.getCurrentPosition((status, result) => {

console.log("定位：", result);

if (result && result.position) {

// 设置经度

vm.lng = result.position.lng;

// 设置维度

vm.lat = result.position.lat;

vm.address = result.formattedAddress; //获取具体位置

console.log("定位address", vm.address);

// 设置坐标

vm.amap.center = [vm.lng, vm.lat];

let op = {

position: [vm.lng, vm.lat, vm.address],

text: vm.address, //提交之后显示的位置

offset: [0, 30],

};

vm.amap.markers.push(op);

// 页面渲染好后

// this.$nextTick().then(() => {

// // 在这里执行你需要在 DOM 更新后执行的代码

// });

}

});

},

},

},

],

//

markers: [],

},

};

},

方法:

// 点击获取地址的数据

// 地图点击事件处理函数

onMapClick(e) {

const { lng, lat } = e.lnglat;

// 更新数据属性

this.dataForm.lon = lng;

this.dataForm.lat = lat;

// 使用 this.$amap 创建 Geocoder 实例

var geocoder = new this.$amap.Geocoder({

radius: 100,

extensions: "all",

});

geocoder.getAddress([lng, lat], (status, result) => {

if (status === "complete" && result.info === "OK") {

if (result && result.regeocode) {

console.log("点击获取地址的数据", result);

this.dataForm.orgAddr = result.regeocode.formattedAddress;

this.dataForm.province = result.regeocode.addressComponent.province;

this.dataForm.city = result.regeocode.addressComponent.city;

this.dataForm.district = result.regeocode.addressComponent.district;

this.dataForm.lat = lat.toString();

this.dataForm.lon = lng.toString();

// 更新标记

this.amap.markers = [

{

position: [lng, lat],

text: result.regeocode.formattedAddress,

offset: [0, 30],

},

];

// 调用其他方法，例如 sure()

this.sure();

}

}

});

},

// 地图搜索回调

onSearchResult(pois) {

const vm = this;

vm.amap.markers = [];

// 根据是否有搜索结果来启用或禁用搜索框

this.searchDisabled = pois && pois.length === 0;

let latSum = 0;

let lngSum = 0;

console.log("地图回调", pois);

if (pois.length > 0) {

pois.forEach((poi, index) => {

const { lng, lat } = poi;

if (index === 0) {

lngSum = lng;

latSum = lat;

const obj = {

position: [poi.lng, poi.lat],

text: poi.name,

offset: [0, 30],

};

vm.amap.markers.push(obj);

console.log("地图搜索回调", poi);

vm.dataForm.orgAddr = poi.name;

vm.dataForm.lat = poi.lat ? poi.lat.toString() : "";

vm.dataForm.lon = poi.lng ? poi.lng.toString() : "";

}

});

vm.amap.center = [lngSum, latSum];

}

},

// 定位成功后更新位置信息的函数

updateLocationInfo(position) {

this.dataForm.lat = position.lat;

this.dataForm.lng = position.lng;

this.dataForm.orgAddr = position.formattedAddress; // position 对象中有 formattedAddress 属性

console.log("更新位置", this.dataForm);

// 更新地图中心点和标记

this.amap.center = [this.dataForm.lng, this.dataForm.lat];

this.amap.markers = [

{

position: [this.dataForm.lng, this.dataForm.lat],

text: this.address,//这里改成后台提供的字段可以提交给后台

offset: [0, 30],

},

];

},

// 提交方法

sure() {

const vm = this;

console.log(this.amap.markers);

this.$emit("updateLocation", vm.dataForm);

},

遇到的问题:1.有的可能会提示 找不到AMap模块 可以引入 import AMap from 'AMap'