mapOptions: {
center: '113.925045, 22.587504',
zoom: 18,
markers: [
{
id: 1,
title: '兴东地铁站D口',
address: '行动',
position: '113.925045, 22.587504'
}
],
markerIcon: {
url: '/static/images/markerIcon.png',
size: {
20,
height: 25
}
}
}
格式:<baidu-map class="map" :center="getPoint(options.center)" :zoom="options.zoom" :scroll-wheel-zoom="true" @ready="initMap" @click="getClickInfo" > <bm-local-search v-if="form.addressDetail" :keyword="`${form.province}${form.city}${form.district}${form.addressDetail}`" :auto-viewport="autoLocation" @change="changeDetail" /> <bm-marker v-for="(marker, i) in options.markers" :key="marker.id" :position="getPoint(marker.position)" :dragging="marker.dragging || dragging" :icon="marker.icon || options.markerIcon || false" :title="marker.title" @click="openInfoWindow(i)" > <bm-info-window :show="show === i" @close="closeInfoWindow" @open="openInfoWindow(i)" > <h4>{{ marker.title }}</h4> </bm-info-window> </bm-marker> </baidu-map>
getPoint(position) {
if (position) {
const arr = position.split(',')
console.log({
lng: arr[0],
lat: arr[1]
})
return {
lng: arr[0],
lat: arr[1]
}
}
},
initMap({ BMap, map }) {
this.BMap = BMap
this.center = this.getPoint(this.options.center)
console.log(this.options.markers)
},
openInfoWindow(i) {
this.show = i
},
closeInfoWindow() {
this.show = -1
},
changeDetail() {
this.autoLocation = true
},