zoukankan      html  css  js  c++  java
  • 百度地图标记

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

      

  • 相关阅读:
    区块链服务平台设计
    Fabric 架构与设计
    ELSE 技术周刊(2017.12.25期)
    ELSE 技术周刊(2017.12.25期)
    ELSE 技术周刊(2017.12.25期)
    UDT的Sender和Receiver
    UDT的Sender和Receiver
    UDT的Sender和Receiver
    UDT的Sender和Receiver
    JavaScript 后台获取数据
  • 原文地址:https://www.cnblogs.com/xiangxiang521/p/15433477.html
Copyright © 2011-2022 走看看