效果图
<template>
<div>
<label>
<a-input-search placeholder="请输入关键字进行搜索" style="width: 200px;margin-bottom: 10px" v-model="keyword" />
</label>
<baidu-map id="map" class="map" center="成都" :zoom="zoom" @ready="handler">
<!--缩放-->
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
<!--定位-->
<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
<bm-local-search :keyword="keyword" :auto-viewport="true" :location="location" ></bm-local-search>
</baidu-map>
</div>
</template>
<script>
export default {
name: "demo",
data () {
return {
zoom: 51,
location: '',
keyword: ''
}
},
methods: {
handler ({BMap, map}) {
map.enableScrollWheelZoom(true);
var cityControl = new BMap.CityListControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
offset: new BMap.Size(10, 5)
});
map.addControl(cityControl);
map.addEventListener('click', function (e) {
map.getOverlays().forEach((e, i) => {
if (e.Bb != null) {
console.log(e);
console.log("content::" + e.Bb.content);
let parser = new DOMParser();
let doc=parser.parseFromString(e.Bb.content, "text/html");
console.log("address::" + doc.getElementsByTagName('td')[1].innerText );
console.log("title::" + e.V.title);
console.log("lng::" + e.point.lng);
console.log("lat::" + e.point.lat);
}
});
})
},
}
}
</script>
<style scoped>
.map {
width: 100%;
height: 400px;
}
</style>