【Vue】集成百度地图及简单使用

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第29天，点击查看活动详情

注册开发者账号

集成百度地图，我们首先需要到百度地图开放平台去注册一个开发者账号。lbsyun.baidu.com/

在开放平台注册为开发者账号后可以创建一个应用，里面就有地图相关要用到的服务。每个应用申请完成之后都会有一个对应的ak秘钥，这个秘钥就相当于微信开发平台的appid，需要在请求百度地图接口的时候用到。

集成到项目

在main.js中引入,ak填写应用秘钥。

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
   ak: ''
});

package-lock.json

"vue-baidu-map": {
  "version": "0.21.22",
  "resolved": "https://registry.npmmirror.com/vue-baidu-map/-/vue-baidu-map-0.21.22.tgz",
  "integrity": "sha512-WQMPCih4UTh0AZCKKH/OVOYnyAWjfRNeK6BIeoLmscyY5aF8zzlJhz/NOHLb3mdztIpB0Z6aohn4Jd9mfCSjQw==",
  "requires": {
    "bmaplib.curveline": "^1.0.0",
    "bmaplib.heatmap": "^1.0.4",
    "bmaplib.lushu": "^1.0.7",
    "bmaplib.markerclusterer": "^1.0.13",
    "markdown-it": "^8.4.0"
  }
},

开发地图展示代码

<template>
  <div>
    <Modal v-model="isShowModal" width="1500px">
      <baidu-map class="map" v-if="isShowModal" :center="map.center" :zoom="map.zoom" @ready="handler">
        <!--缩放-->
        <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
        <!--定位-->
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
        <!--聚合动态添加的点坐标-->
        <bm-marker-clusterer :averageCenter="true">
          <bm-marker v-for="marker of markers" :key="marker.recoveryOrderId" @click="lookDetail(marker,'left')" :position="{lng: marker.longitude, lat: marker.latitude}" ></bm-marker>
        </bm-marker-clusterer>
        <!--信息窗体-->
        <bm-info-window :position="{lng: infoWindow.info.longitude, lat: infoWindow.info.latitude}" :title="infoWindow.info.locationAddress + infoWindow.info.address" :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen">
          <p><span class="left">用户姓名：</span><span class="right">{{infoWindow.info.realName}}</span></p>
          <p><span class="left">用户电话：</span><span class="right">{{infoWindow.info.mobile}}</span></p>
          <p><span class="left">订单状态：</span><span class="right">{{infoWindow.info.orderState == 1 ? '未接单' : '已接单'}}</span></p>
          <p><span class="left">预约时间：</span><span class="right">{{infoWindow.info.recoveryTime}}</span></p>
          <p><span class="left">回收员：</span><span class="right">{{infoWindow.info.recoveryUserName}}</span></p>
        </bm-info-window>
      </baidu-map>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "orderMap",
  data: () => ({
    isShowModal: false,
    show1: false,
    address: '',
    map:{
      center: {
        lng: '116.6163470719684',
        lat: '35.45582592983'
      },
      zoom: 15,
      show: true,
      dragging: true
    },
    markers:[],
      longitude: '',
    latitude: '',
    infoWindow: {
      lng: 0,
      lat: 0,
      show: false,
      info:{
      },
    },
  }),
  methods: {
    // 显示模态框
    show() {
      console.log('执行show')
      this.findList();
      setTimeout(() => {
        this.isShowModal = true;
      }, 1000)
      // this.map.center = {lng: this.longitude, lat: this.latitude}
    },
    handler ({BMap, map}) {
      console.log('执行handler')
      let me = this;
      // console.log(BMap, map)
      // 鼠标缩放
      map.enableScrollWheelZoom(true);
      // map.panBy(580, 150);
    },
    getLng() {

    },
    showItem(item) {
      console.log('点击')
      this.show1 = true
    },
    infoWindowClose() {
      this.show1 = false
    },
    infoWindowOpen() {
      this.show1 = true
    },
    lookDetail(data, target) {
      console.log('data',data)
      this.infoWindow.show =true;
      this.infoWindow.info=data;
    },
    findList() {
      let params = {
        type: 2
      }
      this.axios.post('/recoveryOrder/findMapList', params).then(res => {
        this.isTableLoading = false;
        if (res.status == 200) {
          console.log('findMapList', res.data[1])

          this.longitude = res.data[1].longitude
          this.latitude = res.data[1].latitude
          this.address = res.data[1].address

          this.markers = res.data
        }
        if (res.status == 500) {
          this.$Notice.error({
            title: '服务器内部错误',
            desc: '查询订单列表接口报错',
            duration: 0
          });
        }
      })
    },
  }
}
</script>

bm-info-window：地图中点位点击后弹出的弹窗，可以在里面显示一些点位的详细信息。

bm-marker：聚合点位，数组形式存储经纬度，根据其经纬度在地图中展示出多个点位。