vue3 vite项目使用百度地图插件

最近在学习vue3，为了更好的实践，所以着手将手头以前做过的项目升级为vue3来对比看看都有哪些变化。于是将手头的项目数据大屏视频监控智能分析系统进行vue3升级。之前的项目中要引入百度地图vue-baidu-map，这里有些变化要记录一下。vue2项目使用百度地图请查看：vue2 使用百度地图插件vue2-baidu-map

文档地址

插件使用说明。
文档地址

安装依赖

之前的项目是vue2,现在升级为vue3了所以要安装vue-baidu-map-3x

// vue3
$ npm install vue-baidu-map-3x --save

// vue2
$ npm install vue2-baidu-map --save

获取百度地图key

在使用前，您需先申请密钥（ak）才可使用
申请密钥（ak）

引用

引入我们安装的vue-baidu-map-3x

import BaiduMap from "vue-baidu-map-3x";
const app = createApp(App);
app.use(BaiduMap, {
  ak: '你的百度地图AK'
});
app.mount('#app')

使用

在vue3中使用

<baidu-map ref="bmap" :scroll-wheel-zoom="true"
         @ready="handleMapReady" :center="center" :zoom="zoom"
         class="bm-view">
</baidu-map>

  data() {
    return {
      center: {lng: 116.404, lat: 39.915},
      zoom: 15,
      mapStyle: {
        styleJson: [
          {
            'featureType': 'all',
            'elementType': 'geometry',
            'stylers': {
              'color': '#53F1F0'
            }
          },
          {
            'featureType': 'building',
            'elementType': 'geometry',
            'stylers': {
              'color': '#53F1F0'
            }
          },
          {
            'featureType': 'highway',
            'elementType': 'all',
            'stylers': {
              'lightness': -42,
              'saturation': -91
            }
          },
          {
            'featureType': 'arterial',
            'elementType': 'geometry',
            'stylers': {
              'lightness': -77,
              'saturation': -94
            }
          },
          {
            'featureType': 'green',
            'elementType': 'geometry',
            'stylers': {
              'color': '#53F1F0'
            }
          },
          {
            'featureType': 'water',
            'elementType': 'geometry',
            'stylers': {
              'color': '#53F1F0'
            }
          },
          {
            'featureType': 'subway',
            'elementType': 'geometry.stroke',
            'stylers': {
              'color': '#53F1F0'
            }
          },
          {
            'featureType': 'railway',
            'elementType': 'geometry',
            'stylers': {
              'lightness': -52
            }
          },
          {
            'featureType': 'all',
            'elementType': 'labels.text.stroke',
            'stylers': {
              'color': '#53F1F0'
            }
          },
          {
            'featureType': 'all',
            'elementType': 'labels.text.fill',
            'stylers': {
              'color': '#25487C'
            }
          },
          {
            'featureType': 'manmade',
            'elementType': 'geometry',
            'stylers': {
              'color': '#284A7F'
            }
          },
          {
            'featureType': 'road',
            'elementType': 'geometry',
            'stylers': {
              'color': '#27497E',
              'lightness': -62,
              'saturation': 17
            }
          },
          {
            'featureType': 'subway',
            'elementType': 'geometry',
            'stylers': {
              'lightness': -65
            }
          },
          {
            'featureType': 'railway',
            'elementType': 'all',
            'stylers': {
              'lightness': -40
            }
          },
          {
            'featureType': 'background',
            'elementType': 'geometry',
            'stylers': {
              'color': '#021632',
              'weight': '1',
              'lightness': -29
            }
          }
        ]
      },
    }
},
handleMapReady() {
    const mapInstance = this.$refs.bmap.map;
    // 修改地图主题色
    mapInstance.setMapStyle({styleJson: this.mapStyle.styleJson});
    this.center.lng = 116.404;
    this.center.lat = 39.915;
    this.zoom = 10;
},

百度地图修改地图主题色

个性化地图样式工具

百度地图提供了一个 <a href="http://lbsyun.baidu.com/customv2/index.html" target="_blank" rel="nofollow" title="个性化地图工具">个性化地图工具</a>，你可以在这个工具中进行多种定制，并生成相应的样式代码。

应用个性化样式

生成的样式代码可以在初始化地图时应用。

```javascript
var map = new BMapGL.Map("container");
// 其他初始化代码

// 应用个性化样式
map.setMapStyleV2({
    styleId: '自定义的样式ID'
});
```

或者，你也可以直接把生成的样式 JSON 粘贴进去：

```javascript
map.setMapStyleV2({
  styleJson: [
    // 自定义样式的 JSON 数据
  ]
});
```

点击获取经纬度

<template>
  <div>
    <baidu-map ref="bmap" :scroll-wheel-zoom="true"
               @ready="handleMapReady" :center="center" :zoom="zoom"
               class="bm-view" @click="handleMapClick">
    </baidu-map>
  </div>
</template>

<script>
export default {
  data() {
    return {
      center: {lng: 116.404, lat: 39.915}, // 地图中心点经纬度
      zoom: 15, // 地图缩放级别
    };
  },
  methods: {
    handleMapReady({ BMap, map }) {
      // 地图初始化后的操作
      // ...
    },
    handleMapClick(e) {
      // 获取经纬度
      const { lng, lat } = e.point;
      console.log(`点击位置的经度是: ``{lng}, 纬度是: ``{lat}`);
    },
  },
};
</script>

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

渲染自定义图片

设备列表

[{
    name: '设备1',
    id: '1',
    status: 1,
    value: [116.42599051888418, 39.91306312138842]
}, {
    name: '设备2',
    id: '2',
    status: 0,
    value: [116.41097085075735, 39.930051107522615]
}, {
    name: '设备3',
    id: '3',
    status: 1,
    value: [116.37518235923983, 39.905425443934355]
}, {
    name: '设备4',
    id: '4',
    status: 0,
    value: [116.40335322003274, 39.91749036745209]
}, {
    name: '设备5',
    id: '5',
    status: 1,
    value: [116.43425492957599, 39.91660494131743]
}]

根据status渲染不同的图片

import monitoring_green from '../../assets/home/monitoring_green.png'
import monitoring_red from '../../assets/home/monitoring_red.png'
handleMapReady({ BMap, map }) {
  const mapInstance = this.$refs.bmap.map;
  // 修改地图主题色方法2
  mapInstance.setMapStyleV2({
    styleId: '9985b1b9b3c53e2a39308e8a6d3fdc0d'
  });
  // 地图初始化完成后的回调
  this.list.forEach(device => {
    const point = new BMap.Point(device.value[0], device.value[1]);

    // 根据状态选择图标
    const iconUrl = device.status === 1 ? monitoring_green : monitoring_red;

    const icon = new BMap.Icon(iconUrl, new BMap.Size(73, 83)); // 设置图片尺寸
    const marker = new BMap.Marker(point, { icon: icon });

    // 可选：添加信息窗口
    const infoWindow = new BMap.InfoWindow(`<p>${device.name}</p>`);
    marker.addEventListener('click', function() {
      this.openInfoWindow(infoWindow);
    });

    map.addOverlay(marker); // 将标注添加到地图中
  });
},

效果截图

引用最终效果截图