1、下载地图插件 npm install vue-baidu-map
2、引入百度地图插件 import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
3、在html中使用
<div style="text-align: center">
<div :class="baseFormStyle.locationBox">
<div style="width: 200px;position: absolute; left: 60px;top: 10px;z-index:100 !important;">
<a-input-search
placeholder="请输入地名"
id="searchIn"
@search="searchAddress"
@clear="searchAddress"
@focus="focusClick"
clearable
search
style="width: 200px; ">
</a-input-search>
<div v-show="showResultFlag" :class="baseFormStyle.searchResultBox">
<happy-scroll resize >
<div :class="baseFormStyle.searchResult">
<div v-for="(item, index) in searchResult" :class="baseFormStyle.item" :key="index" @click="handleSelect(item)">
<p :class="baseFormStyle.title">{{ item.title }}</p>
<p :class="baseFormStyle.address">{{ item.address }}</p>
</div>
</div>
</happy-scroll>
</div>
</div>
<baidu-map
id="allmap"
:class="baseFormStyle.allmap"
ak="您的秘钥"
:center="mapCenter"
:zoom="mapZoom"
:scroll-wheel-zoom="true"
@ready="mapReady">
</baidu-map>
</div>
</div>
4、js中使用地图 初始化
//地图初始化
mapReady({ BMap, map }) {
let that = this;
this.BMap = BMap;
this.baseForm.locationLatitude = 113.43097;
this.baseForm.locationLongitude = 23.092506;
this.map = map;
this.point = new this.BMap.Point( this.baseForm.locationLatitude, this.baseForm.locationLongitude);
this.mapCenter.lng = this.baseForm.locationLatitude;
this.mapCenter.lat = this.baseForm.locationLongitude;
this.tempData.locationLatitude = this.baseForm.locationLatitude;
this.tempData.locationLongitude = this.baseForm.locationLongitude;
// 选择一个经纬度作为中心点
this.map.centerAndZoom(this.point, 12);
let marker = new this.BMap.Marker(this.point); // 创建标注
this.map.addOverlay(marker); // 将标注添加到地图中
this.map.addControl(new this.BMap.NavigationControl());
this.zoom = 15;
map.addEventListener("click", function(e){
that.tempData.locationLatitude = e.point.lng;
that.tempData.locationLongitude = e.point.lat;
});
},
5、搜索地址关键词
//搜索地址
searchAddress(data = ''){
console.log('data',data)
if(!data || this.tempData.searchKeyWord === data){
data = ''; return;
}
this.tempData.searchKeyWord = data;
let map = this.map;
let that = this;
that.showResultFlag = true;
let local = new this.BMap.LocalSearch(map,{
renderOptions:
{map: map, autoViewport: true, selectFirstResult: false },
onMarkersSet:function (array) {
console.log(array);
},
onInfoHtmlSet:function (LocalResultPoi) {
console.log(LocalResultPoi);
},
onResultsHtmlSet:function (element) {
console.log(element);
}
,onSearchComplete: function(res){
console.log("results",res)
if (res && res.Kr) {
that.searchResult = [...res.Kr]
}
}
});
local.search(data)
},
6、选择下拉结果
// 选择下拉
handleSelect(item) {
let that = this;
let title = item.title;
let { lng, lat } = item.marker.point;
let point = new that.BMap.Point(lng, lat);
let geoc = new that.BMap.Geocoder();
that.tempData.locationLatitude = lng;
that.tempData.locationLongitude = lat;
geoc.getLocation(point, function (res) {
that.showResultFlag = false;
that.map.clearOverlays(); //清除地图上所有覆盖物
that.map.addOverlay(new that.BMap.Marker({ lng, lat }));
that.mapCenter.lng = lng;
that.mapCenter.lat = lat;
that.mapZoom = 15;
})
},
7、效果如下