Vue使用百度地图点击标记点出现信息窗体

参考官方文档

html页面

<baidu-map :center="center" :zoom="zoom" @ready="handler" class="map">
  <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true"
                  :autoLocation="true"></bm-geolocation>
  <!--            标记-->
  <bm-marker :position="{lng: project.lng, lat: project.lat}" @click="infoWindowOpen">
    <bm-info-window :show="mapshow" @close="infoWindowClose" :width="0" :height="0">
      地址：{{project.address||'暂无信息'}}
    </bm-info-window>
  </bm-marker>
</baidu-map>

方法

   data () {
      return {
        center: {
          lng: 0,
          lat: 0
        },
        zoom: 16
      }
    },
      // 百度地图
      handler ({BMap, map}) {
        map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
        // 中心点
        this.center.lng = this.center.lng
        this.center.lat = this.center.lat
        this.zoom = this.zoom
      },      
      // 关闭窗体
      infoWindowClose () {
        this.mapshow = false
      },
      // 打开窗体
      infoWindowOpen () {
        this.mapshow = true
      }

样式

  .map {
    margin-right: 10px;
    height: 260px;
  }

效果图