一。安裝高德地圖
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>`在這里插入代碼片`
三、創(chuàng)建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="關(guān)鍵詞" prop="address" label-width="80px">
<el-input
v-model="formData.address"
id="tipinput"
placeholder="請輸入關(guān)鍵詞"
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',
},
/**
* 默認(rèn)顯示的地圖對象信息
* 地址 經(jīng)度 緯度
* { address: '', lat: '',lng: '',}
*/
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: {//默認(rèn)地圖顯示的點位
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) {//父組件傳過來的點 默認(rèn)點位打點
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) => {//轉(zhuǎn)換地址
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:{},//默認(rèn)點位信息為空
}
},
methods:{
getMapData(mapInfo){
console.log('獲取到的地圖地址經(jīng)緯度信息：',mapInfo)
}
}
};
</script>
文章來源地址http://www.zghlxwxcb.cn/news/detail-811679.html
文章來源：http://www.zghlxwxcb.cn/news/detail-811679.html
到了這里，關(guān)于在vue中使用高德地圖點擊打點，搜索打點，高德地圖組件封裝的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
