vue3使用vue-baidu-map-3x百度地图

1.npm安装vue-baidu-map-3x组件

npm install vue-baidu-map-3x --save

2.在项目中引入包（按需引入）

页面中直接引入就可以
import { BaiduMap } from 'vue-baidu-map-3x'

3.使用组件

注意：局部注册的 BaiduMap 组件必须声明 ak,v,type 属性

 <baidu-map class="map" ak="BaiduMapAK" v="3.0" type="API" :center="{lng: 116.404, lat: 39.915}" :zoom="15"></baidu-map>

.map {
  width: 100%;
  height: 300px;
}

4.使用百度地图标注点BmMarker、信息窗口BmInfoWindow、行政区域划线BmBoundary

import { BaiduMap, BmMarker, BmInfoWindow, BmBoundary } from 'vue-baidu-map-3x'
详细使用方式请查看下方网址
 https://map.heifahaizei.com/doc/begin/install.html

4.一些自己的测试代码

<template>
	<baidu-map
		class="map"
		:center="center"
		:zoom="zoom"
		:scroll-wheel-zoom="true"
		:ak="BaiduMapAK"
		:mapStyle="mapStyle"
		v="3.0"
		type="API"
		@ready="handler"
	>	
	<!--行政区划-->
		<bm-boundary
			name="朝阳区"
			:strokeWeight="2"
			strokeColor="#5679ea"
			fillColor="#5679ea"
			fillOpacity="0.5"
		></bm-boundary>
		<!--标注点-->
		<bm-marker
			v-for="(item, index) in points"
			:key="index"
			:position="{ lng: item.lng, lat: item.lat }"
			:dragging="true"
			:icon="{ url: '你的url', size: { width: 30, height: 17 } }"
			@click="openInfo(item)"
		>
		</bm-marker>
		<!--信息窗口-->
		<bm-info-window
			:position="showInfoWindow.position"
			:show="showInfoWindow.open"
			@close="showInfoWindow.open = false"
			@open="showInfoWindow.open = true"
		>
			{{ showInfoWindow.content }}
		</bm-info-window>
		</baidu-map>
</template>

import { BaiduMap, BmMarker, BmInfoWindow, BmBoundary } from 'vue-baidu-map-3x'
const center = ref({ lng: 116.404, lat: 39.915 }) //地图中心点
const zoom = ref(12)//地图层级
const BaiduMapAK = ref('你的AK')//百度AK
const handler = ({ BMap, map }) => {//地图加载完事件
	console.log(BMap, map)
}
//marker坐标数组
const points = ref([
	{ lng: 116.404, lat: 39.915, content: 'test1' },
	{ lng: 116.504, lat: 39.815, content: 'test2' }
])
//地图样式
const mapStyle = ref({
	styleJson: [
		{
			featureType: 'background',
			elementType: 'all',
			stylers: {
				color: '#042149ff'
			}
		},
		{
			featureType: 'road',
			elementType: 'geometry',
			stylers: {
				color: '#1b4a7aff'
			}
		}
	]
})
//信息窗口的内容
const showInfoWindow = ref({
	open: false,
	content: '',
	position: ''
})
//点击marker事件，打开信息窗口
const openInfo = (item) => {
	console.log(item)
	showInfoWindow.value.open = true
	showInfoWindow.value.content = item.content
	showInfoWindow.value.position = { lng: item.lng, lat: item.lat }
}