vue3-bmapgl v0.0.14

vue3-bmapgl

BMapGL 的 vue3 绑定，参考 react 版

Todo

• Map
• CustomOverlay
• Polyline
• Polygon
• Circle
• Label
• Marker
• InfoWindow
• ZoomControl
• NavigationControl3D
• ScaleControl
• MapvglLayer

安装

npm install vue3-bmapgl

使用

在此之前您仍需要手动引入 bmapgl https://api.map.baidu.com/api?type=webgl&v=2.0&ak=您的密钥"

import { Map, CustomOverlay } from 'vue3-bmapgl'

<Map ref="mapComp">
    <CustomOverlay position="116.41088,39.798774">custom overlay</CustomOverlay>
    <CustomOverlay :position="[116.41088, 39.898774]">custom overlay</CustomOverlay>
    <CustomOverlay :position="{lng: 116.41088, lat: 39.998774}">custom overlay</CustomOverlay>
</map>

Map

props

Prop name	Type	Default	Description
center	string \| [number, number] \| { lng: number, lat: number } \| BMapGL.Point	'116.41088,39.898774'	中心位置
zoom	number	12	缩放级别
minZoom	number	1	最小缩放级别
maxZoom	number	20	最大缩放级别
mapType	normal \| earth	normal	地图类型，普通地图或地球模式
heading	number	0	地图旋转角度
tilt	number	0	地图倾斜角度
enableRotate	boolean	true	是否允许旋转
enableTilt	boolean	true	是否允许倾斜
enableDragging	boolean	true	是否允许拖拽
enableScrollWheelZoom	boolean	true	是否允许鼠标滚轮缩放
enableDoubleClickZoom	boolean	true	是否允许鼠标双击缩放
enableInertialDragging	boolean	true	是否允许惯性拖拽
mapStyleV2	BMapGL.MapStyleV2	-	个性化地图样式
preserveDrawingBuffer	boolean	false	是否支持获取地图截图

获取 map 实例

setup() {
    const mapComp = ref()
    onMounted(() => {
        console.log(mapComp.value?.map)
    })
    return { mapComp }
}

CustomOverlay

props

Circle

Polygon

Polyline

Marker

NavigationContral3D

ScaleControl

ZoomControl