一。安装高德地图
npm install @amap/amap-jsapi-loader --save
二、在index.html文件中引入高德地图JavaScript API：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 2 AMap Demo</title>
<script src="https://webapi.amap.com/maps?v=2.0&key=你的key"></script>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>`在这里插入代码片`
三、创建Vue组件，AMapMarker.vue
<template>
<div class="map-wrap" :style="{ width: width, height: height }">
<el-form
:model="formData"
:rules="rules"
:disabled="disabled"
class="mapFormData"
ref="mapFormData"
>
<el-form-item label="关键词" prop="address" label-width="80px">
<el-input
v-model="formData.address"
id="tipinput"
placeholder="请输入关键词"
clearable
></el-input>
</el-form-item>
</el-form>
<div id="container" class="container map"></div>
</div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
props: {
width: {
type: String,
default: '100%',
},
height: {
type: String,
default: '500px',
},
defaultMapData: {
type: Object,
default: () => new Object(),
},
disabled: {
type: Boolean,
default: false,
},
},
data() {
return {
mapInfo: null,
marker: null,
searchValue: '',
formData: {
address: '',
lat: '',
lng: '',
},
rules: {},
}
},
watch: {
defaultMapData: {
handler(newV) {
if ((newV && JSON.stringify != '{}') || newV.lat) {
this.formData = {...newV}
this.initMap()
} else {
this.formData = {
address: '',
lat: '',
lng: '',
}
}
},
deep: true,
immediate: true,
},
disabled: {
handler(newV) {
if (newV) {
this.setMapEvent(true)
} else {
this.setMapEvent(false)
}
},
immediate: true,
},
},
methods: {
initMap() {
AMapLoader.load({
key: '你的key',
version: '2.0',
plugins: ['AMap.Geocoder', 'AMap.Geolocation', 'AMap.CitySearch'],
resizeEnable: true,
})
.then((AMap) => {
this.mapInfo = new AMap.Map('container', {
resizeEnable: true,
zoom: 16,
center:[116.397428, 39.90923],
})
if (this.defaultMapData.lat && this.defaultMapData.lng) {
this.marker && this.mapInfo.remove(this.marker)
this.marker = new AMap.Marker({
position: new AMap.LngLat(this.defaultMapData.lng, this.defaultMapData.lat),
})
this.mapInfo.add(this.marker)
this.setMapCenter(this.defaultMapData.lng, this.defaultMapData.lat)
}
const autoOptions = {
input: 'tipinput',
}
AMap.plugin(['AMap.AutoComplete'], () => {
const auto = new AMap.AutoComplete(autoOptions)
auto.on('select', this.adrSelect)
})
this.setMapEvent(this.disabled)
})
.catch((e) => {
})
},
setMapCenter(lng, lat) {
this.mapInfo.setZoomAndCenter(16, [lng, lat])
},
adrSelect(e) {
this.setMapCenter(e.poi.location.lng, e.poi.location.lat)
this.marker && this.mapInfo.remove(this.marker)
this.marker = new AMap.Marker({
position: new AMap.LngLat(e.poi.location.lng, e.poi.location.lat),
})
this.setFormData( e.poi.location.lng, e.poi.location.lat,e.poi.name)
this.emitMapData(e.poi.name, e.poi.location.lng, e.poi.location.lat)
this.mapInfo.add(this.marker)
},
addMarker(e) {
this.marker && this.mapInfo.remove(this.marker)
this.marker = new AMap.Marker({
position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat),
})
this.setFormData(e.lnglat.lng, e.lnglat.lat, this.formData.address)
this.emitMapData(this.formData.address, e.lnglat.lng, e.lnglat.lat)
this.mapInfo.add(this.marker)
const geocoder = new AMap.Geocoder({
radius: 1000,
extensions: 'all',
})
geocoder.getAddress([e.lnglat.lng, e.lnglat.lat], (status, result) => {
if (status === 'complete' && result.regeocode) {
this.$set(this.formData, 'address', result.regeocode.formattedAddress)
} else {
}
})
this.setMapCenter(e.lnglat.lng, e.lnglat.lat)
},
setFormData(lng, lat, address) {
this.$set(this.formData, 'address', address)
this.$set(this.formData, 'lng', lng)
this.$set(this.formData, 'lat', lat)
},
emitMapData(address = this.formData.address, lng = this.formData.lng, lat = this.formData.lat) {
this.$emit('getMapData', {
address,
lng,
lat,
})
},
setMapEvent(flg) {
this.$nextTick(() => {
if (flg) {
this.mapInfo && this.mapInfo.off('click', this.addMarker)
} else {
this.mapInfo && this.mapInfo.on('click', this.addMarker)
}
})
},
},
destroyed() {},
}
</script>
<style lang="less" scoped>
.map-wrap {
width: 100%;
height: 500px;
position: relative;
.mapFormData {
position: absolute;
width: 100%;
top: 18px;
left: 0;
z-index: 99;
::v-deep .el-input__inner {
width: 70%;
}
}
.map {
width: 100%;
height: 100%;
}
.row {
margin-top: 10px;
display: flex;
}
.mr20 {
margin-right: 20px;
}
}
</style>
四、在需要使用组件的地方引入并使用AMapMarker组件
<template>
<div :style='width:500px;height:500px;'>
<AMapMarker @getMapData='getMapData' :defaultMapData='defaultMapData' />
</div>
</template>
<script>
import AMapMarker from './AMapMarker.vue';
export default {
components: {
AMapMarker
},
data(){
return {
defaultMapData:{},
}
},
methods:{
getMapData(mapInfo){
console.log('获取到的地图地址经纬度信息：',mapInfo)
}
}
};
</script>