初识百度map

前言

最近做的一个大屏页面，其中有一块是地图展示，并且要求实现点击地图上面的点位弹出弹窗展示对应的内容，下面附上实现过程以及核心代码。

---

1.首先要安装百度map并且在main.js引入并全局注册

npm install vue-baidu-map --save

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

---

2.在public文件夹下面的index.html文件中添加百度地图JavaScript API的接口

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>

---

3.组件内使用

直接上实例代码

<template>
  <div class="mapbox" style="width: 100%">
    <!-- 地图容器 -->
    <baidu-map class="mapsBox" id="maps" ref="maps" @ready="handler" :style="baiduHeight" :center="center" :dragging="true"
      :scroll-wheel-zoom="true" :zoom="zoom" :map-click="false">
      <!-- 定位 -->
      <bml-marker-clusterer :averageCenter="true" :styles="url">
        <div v-for="(marker, i) of markers" :key="i">
          <bm-marker :dragging="false" :icon="{ url: marker.url, size: { width: 45, height: 45 } }"
            :position="{ lng: marker.lng, lat: marker.lat }" @click="infoWindowOpen(marker)">
            <bm-info-window title="企业详细信息" :position="{ lng: marker.lng, lat: marker.lat }" :show="marker.showFlag"
              @close="infoWindowClose(marker)">
              <div class="detailsBox">
                <p>企业名称 : {{ details.companyName }}</p>
                <p>企业类型 :
                  <span v-if="details.qytype == '1'">机动车销售企业</span>
                  <span v-if="details.qytype == '2'">机动车生产企业</span>
                  <span v-if="details.qytype == '3'">非道路生产企业</span>
                  <span v-if="details.qytype == '4'">非道路生产企业</span>
                </p>
                <p>备案数量 : {{ details.bacount }}</p>
                <p>车型数量 : {{ details.cxcount }}</p>
                <p>核查数量 : {{ details.hccount }}</p>
                <p>核查率 : {{ details.hcl }}</p>
              </div>
            </bm-info-window>
          </bm-marker>
        </div>
      </bml-marker-clusterer>
    </baidu-map>
  </div>
</template>

<script>
// 按需引入点聚合
import { BmlMarkerClusterer } from "vue-baidu-map";
// 引入marker
import BmMarker from "vue-baidu-map/components/overlays/Marker";
import { getqyData, getCompanyDetail } from "@api/mecInfor"; //引入接口文件
export default {
  name: "maps",
  components: {
    //注册组件
    BmlMarkerClusterer,
    BmMarker,
  },
  data() {
    const markers = [];
    const maps = this.maps;
    return {
      center: { lng: 118.124372, lat: 39.632806 }, //经纬度
      zoom: 10, //地图缩放视野值
      baiduHeight: { height: "", width: "100%" }, //地图容器宽高
      BMap: "", //地图轮廓的一个方法
      map: "", //边界线用到
      url: [], //用于点聚合icon赋值
      show: false, //显示隐藏窗口
      maps: [], //将接口数据赋值到这个数组中
      markers, //用于将地图经纬度push到这个数组中
      details: {}, //详情数据
    };
  },

  methods: {
    //点位接口下面地图中调用
    getqyData() {
      getqyData().then((res) => {});
    },
    //地图方法
    handler({ BMap, map }) {
      //点位接口
      this.getqyData(); //初始进入地图调用点位接口
      this.markers = []; //请求之前清空数组
      getqyData().then((res) => {
        this.$nextTick(() => {
          this.maps = res.data;
          for (let i = 0; i < this.maps.length; i++) {
            if (this.maps[i].type == "1") {
              let position = {
                lng: res.data[i].lng,
                lat: res.data[i].lat,
                id: res.data[i].id,
                showFlag: false,
                url: require("../../assets/zc.png"),
              };
              this.markers.push(position);
            }
            if (this.maps[i].type == "2") {
              let position = {
                lng: res.data[i].lng,
                lat: res.data[i].lat,
                id: res.data[i].id,
                showFlag: false,
                url: require("../../assets/dycb.png"),
              };
              this.markers.push(position);
            }
            if (this.maps[i].type == "3") {
              let position = {
                lng: res.data[i].lng,
                lat: res.data[i].lat,
                id: res.data[i].id,
                showFlag: false,
                url: require("../../assets/hscb.png"),
              };
              this.markers.push(position);
            }
          }
        });
      });
      //地图轮廓的一个方法
      map.centerAndZoom("唐山", 10); //初始化地图,设置中心点坐标和地图级别
      this.BMap = BMap;
      this.map = map;
      let bdary = new BMap.Boundary(); //显示城市边界线
      bdary.get("唐山", function (res) {
        for (let i = 0; i < res.boundaries.length; i++) {
          var ply = new BMap.Polygon(res.boundaries[i], {
            strokeWeight: 4, //边缘线的粗细
            strokeOpacity: 1, //透明度
            strokeStyle: "line", //边线的样式,solid或dashed
            strokeColor: "#ff0000", //线的颜色
          });
          map.addOverlay(ply); //向地图添加覆盖物
          ply.setFillColor("none");
        }
      });
      this.center.lat = 0;
      this.center.lng = 0;
    },

    // 关闭信息窗口 @close 自带的方法
    infoWindowClose(marker) {
      marker.showFlag = false;
    },
    // 首先点击marker时开启信息窗口，其实没必要在 bm-info-window 上写 @open 因为如果是关闭状态根本就点不到，所以就无法触发 @open
    // 如果在 bm-info-window 上写了 @open 在点击marker时会触发两次infoWindowOpen函数，而且可以很明显的看到有延时
    infoWindowOpen(marker) {
      //展示详情框
      marker.showFlag = true;
      getCompanyDetail({ id: marker.id }).then((res) => {
        if (res.code == "10000") {
          //赋值操作
          this.details = res.data;
          console.log(res.data, "详情...");
        }
      });
    },
  },
};
</script>
<style scoped>
.mapbox {
  /* 兼容处理 */
  position: relative;
  -moz-user-select: none; /*火狐*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  width: 100%;
  height: 100%;
  z-index: 9;
}

.mapsBox {
  /* 地图容器 */
  height: 100%;
}

.detailsBox p {
  /* 详情容器 */
  padding: 3px 0px;
}
</style>

---

实现效果