在vue中用百度地图标记某些地点信息，并提示

应用插件： vue-baidu-map
功能效果

1.安装vue-baidu-map插件。
2.在main.js中添加代码

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'udc6OrhXR4BVrdjvVlSxyU2D3Mmd7Y'
})

3.vue页面

<template>
  <div>
    <baidu-map
      ak="ocjtpCpd3HusX9VUmkfc49P9jxRV5Vch"
      :scroll-wheel-zoom="true"
      :center="{ lng: 116.383141, lat: 39.913607 }"
      :zoom="12"
    >
      <!-- :scroll-wheel-zoom="true" //开启滚轮缩放 -->

      <!--地图视图-->

      <bm-view class="map"></bm-view>

      <!--点标注-->
      <!-- position 标注的位置 -->
      <!-- dragging 是否启用拖拽 -->
      <!-- title 鼠标移到marker上显示内容 -->
      <!-- zIndex设置覆盖物的zIndex -->
      <!-- icon标注所用的图标对象 -->
      <!-- dragend 拖拽结束时触发此事件 -->
      <div v-for="(marker, index) of markers" :key="index">
        <bm-marker
          :position="{ lng: marker.lng, lat: marker.lat }"
          @mouseover="lookDetail(marker)"
          @mouseout="infoWindowClose(marker)"
          :icon="{ url: markerIcon, size: { width: 34, height: 34 } }"
          :dragging="true"
          :zIndex="999999999"
        >
          <!-- show 是否开启窗体 -->
          <!-- close窗体被关闭时触发的事件 -->
          <!-- open窗体被打开时触发的事件 -->
          <bm-label
            :content="marker.number"
            :labelStyle="{ color: 'red', fontSize: '24px' }"
            :offset="{ width: -35, height: 30 }"
          />
          <bm-info-window
            :position="{ lng: marker.lng, lat: marker.lat }"
            :show="marker.showFlag"
            @close="infoWindowClose(marker)"
          >
            <div>电站名称:111</div>
            <div style="display: flex; flex-wrap: wrap; width: 250px">
              <div>充电金额：{{ marker.buildName }}</div>
              <div>充电金额：{{ marker.buildName }}</div>
              <div>充电金额：{{ marker.buildName }}</div>
              <div>充电金额：{{ marker.buildName }}</div>
              <div>充电金额：{{ marker.buildName }}</div>
            </div>
          </bm-info-window>
        </bm-marker>
      </div>
      <!--比例尺控件-->
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      <!--缩放控件-->
      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
    </baidu-map>
  </div>
</template>

 

<script>
import BmView from 'vue-baidu-map/components/map/MapView' //地图视图
import BmMarker from 'vue-baidu-map/components/overlays/Marker' //点标注
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow' //标注弹窗
import BmScale from 'vue-baidu-map/components/controls/Scale'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation'

export default {
  components: {
    BmView,
    BmMarker,
    BmInfoWindow,
    BmScale,
    BmNavigation,
  },

  data() {
    return {
      // 地图标记点
      markers: [
        {
          lng: '116.383141',
          lat: '39.913607',
          name: '信息窗口1',
          showFlag: false,
          number: '1',
          buildName: '胡歌',
        },

        {
          lng: '116.383141',
          lat: '39.900000',
          name: '信息窗口2',
          showFlag: false,
          number: '20',
          buildName: '花花',
        },
      ],
      markerIcon: 'http://api0.map.bdimg.com/images/marker_red_sprite.png', //标注图片
    }
  },

  methods: {
    infoWindowClose(marker) {
      //弹框关闭
      marker.showFlag = false
    },
    lookDetail(marker) {
      marker.showFlag = true
    },
  },
}
</script>

<style lang="less" scoped>
.map {
  width: 100%;

  height: 500px;
}
</style>