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 },