vue百度地图打点和标注

1.下载 vue-baidu-map

npm install vue-baidu-map --save

2.在main.js文件中导入，并全局定义

import BaiduMap from 'vue-baidu-map'
 
Vue.use( BaiduMap, { ak : '百度地图生成的ak' } )

3.去掉百度logo

public文件下的index.html，加入以下代码

<style type="text/css">.BMap_cpyCtrl {display: none;}</style>
  <style type="text/css">.anchorBL{display:none;}</style>

3.组件中使用

<template>
  <div id="test">
    <baidu-map class="bm-view" @ready="init">
      <div v-for="item in maps" :key="item.id">
      <!-- 打点，遍历maps数组-->
        <bm-marker :position="{lng: item.lng, lat: item.lat}"
                   @click="lookDetail(item)">
          <!-- 标注，遍历出maps数组的每一项-->
          <bm-label
            :content="item.deptname +item.zbmc"
            :labelStyle="{ color: 'red', fontSize: '12px' }"
            :offset="{ width: -35, height: 30 }"
            @click="lookDetail(item)"
          />
          <!-- 窗口 -->
          <bm-info-window
            :title="showTitle"
            :positon="{lng:infoWindow.lng,lat:infoWindow.lat}"
            :offset="{ width: 150, height: 150 }"
            :show="item.showFlag"
            @close="infoWindowClose(item)"
            @open="infoWindowOpen(item)"
          >

            <!-- 窗口内容 -->
            <div class="info-window">
              
            </div>

          </bm-info-window>
        </bm-marker>
        <!-- 信息窗口 -->

      </div>
    </baidu-map>

  </div>
</template>

<script>
import {getPubJddmGisList} from "@/api/gis";
export default {
  data() {
    return{
      map: "", // 地图
      // 站点信息数组
      maps:[
        {
          lng: 110.229321,
          lat: 25.227083,
          showFlag: false
        },{
          lng: 104.979273,
          lat: 25.096498,
          showFlag: false
        },
      ],
      showTitle: "信息窗口",
      infoWindow: {
          lng:"",
          lat:"",
      },
    }
}

methods: {
  //地图方法

  init({BMap, map}) {
      this.deptGisList()
      let point = new BMap.Point(108.953723, 34.276202); //设置城市经纬度坐标
      map.centerAndZoom(point, 5); //地图缩放比例
      map.setCurrentCity("西安"); // 设置地图显示的城市 此项是必须设置的
      map.enableScrollWheelZoom(true); //鼠标滚动缩放
    },
 // 点击弹框
  lookDetail(item){
      this.infoWindow.lng = item.lng;
      this.infoWindow.lat = item.lat;
      item.showFlag = true; //showFlag来控制弹框展示和隐藏
      this.infoWindow = item;
      console.log(this.infoWindow);
    }
 infoWindowClose(item) {
     item.showFlag = false

    }
infoWindowOpen(item) {
     item.showFlag = true
    }

  }
}
</script>
<style>

.bm-view {
  width: 100%;
  height: 100vh;
}
</style>