vue2使用百度地图api（根据多组经纬度进行标记地点）

1.百度地图api官网注册账号获取ak秘钥

网址：jspopularGL | 百度地图API SDK

2.在自己的项目中引入百度地图

（1）安装

npm install vue-baidu-map --save

（2）在main.js中引入

// 百度地图

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {

  ak: '', //这个地方是官方提供的ak密钥

})

3.在vue项目中使用(完整代码)

<template>
  <div class="MapTest">
    <BMap
      ak=""
      :center="center"
      class="map"
      :scroll-wheel-zoom="true"
      :zoom="zoom"
      @ready="bMapLoad"
    />
  </div>
</template>

<script>
  import BMap from 'vue-baidu-map/components/map/Map'

  let mapConstructor // 百度地图构造函数存放容器

  export default {
    name: 'MapTest',
    components: {
      BMap,
    },
    data() {
      return {
        // mapPoint,
        center: {
          lng: 116.404,
          lat: 39.915,
        },
        pointsList: [
          {
            longitude: '116.46',
            latitude: '39.92',
            address: '北京',
          },
          {
            longitude: '116.2',
            latitude: '40.22',
            address: '昌平',
          },
          {
            longitude: '117.2',
            latitude: '39.13',
            address: '天津',
          },
          {
            longitude: '121.48',
            latitude: '31.22	',
            address: '上海',
          },
          {
            longitude: '106.54',
            latitude: '29.59',
            address: '重庆',
          },
          {
            longitude: '104.04',
            latitude: '30.40',
            address: '成都',
          },
          {
            longitude: '117.00',
            latitude: '36.40',
            address: '济南',
          },
          {
            longitude: '120.00',
            latitude: '36',
            address: '青岛',
          },
        ],
        zoom: 6,
        map: null, // 地图容器
        BMap: null, // 构造器容器
      }
    },
    mounted() {
      // this.initMap()
    },
    methods: {
      // initMap() {
      //   // 创建地图实例
      //   const map = new BMap.Map('map')
      //   const point = new BMap.Point(116.404, 39.915) // 创建点坐标
      //   map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别

      //   // 创建文字标注
      //   const label = new BMap.Label('这里是文字说明', {
      //     offset: new BMap.Size(20, -10),
      //   })
      //   // 自定义文字样式
      //   label.setStyle({
      //     color: 'red',
      //     fontSize: '12px',
      //     height: '20px',
      //     lineHeight: '20px',
      //     fontFamily: '微软雅黑',
      //   })
      //   // 将标注添加到地图中
      //   map.addOverlay(label)
      //   // 将标注的位置设置为地图中心点
      //   label.setPosition(point)
      // },

      // BMap加载触发实例化方法
      bMapLoad({ BMap, map }) {
        // 百度地图容器全局化
        this.map = map
        // 百度地图构造函数全局化
        mapConstructor = BMap
        this.BMap = BMap
        this.bMapPoint()
      },

      // 在百度地图上打点方法
      bMapPoint() {
        // 清除地图上的覆盖物
        this.map.clearOverlays()
        //  对多个经纬度点进行标注
        this.pointsList.forEach((element) => {
          const mPoint = new mapConstructor.Point(
            element.longitude * 1,
            element.latitude * 1
          )
          var myIcon = new mapConstructor.Icon( // 自定义图标
            require('@/icon/car.png'),
            new mapConstructor.Size(64, 64) // 图标的宽度和高度
          )
          var marker = new mapConstructor.Marker(mPoint, {
            icon: myIcon,//注意icon i小写，负责图标无法显示
          })
          this.map.addOverlay(marker)
          // 创建文字标注
          const label = new mapConstructor.Label(
            element.address,
            // `(${element.longitude * 1},${element.latitude * 1})`,
            {
              position: {
                lng: element.longitude * 1,
                lat: element.latitude * 1,
              }, // 文本绑定的点位位置
              offset: new mapConstructor.Size(2, -16), // 文本位置移动
            }
          )
          // 自定义文字样式
          label.setStyle({
            color: 'black',
            fontSize: '12px',
            height: '20px',
            lineHeight: '20px',
            border: '1px solid #000',
          })
          // 将标注添加到地图中
          this.map.addOverlay(label)
        })
        // 对单个经纬度点进行标注
        // const mPoint = new mapConstructor.Point(
        //   this.center.lng,
        //   this.center.lat
        // )
        // 创建文字标注
        // const label = new mapConstructor.Label(
        //   `(${this.center.lng},${this.center.lat})`,
        //   {
        //     position: this.center, // 文本绑定的点位位置
        //     offset: new mapConstructor.Size(-5, -20), // 文本位置移动
        //   }
        // )
        // // 自定义文字样式
        // label.setStyle({
        //   color: 'black',
        //   fontSize: '12px',
        //   height: '20px',
        //   lineHeight: '20px',
        //   border: '1px solid #000',
        // })
        // 将标注添加到地图中
        // this.map.addOverlay(label)
        // 自定义图标
        // eslint-disable-next-line no-unused-vars
        // var myIcon = new mapConstructor.Icon(
        //   require('./car_top.png'),
        //   new mapConstructor.Size(64, 64)
        // )
        // var marker = new mapConstructor.Marker(mPoint, {
        //   Icon: myIcon,
        // })
        // this.map.addOverlay(marker)
      },
    },
  }
</script>

<style scoped lang="scss">
  .MapTest {
    padding: 20px;
  }
  .map {
    width: 100%;
    height: calc(100vh - 240px);
  }
  // 去掉百度地图左下角的logo
  :deep() {
    .BMap_cpyCtrl {
      display: none;
    }
    .anchorBL {
      display: none;
    }
  }
</style>

4.效果截图