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: {
            width: 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
    },

  

posted on 2021-10-21 14:59  大橙子最美丽  阅读(102)  评论(0编辑  收藏  举报