Vue3 Baidu Map Gl

Appearance

Map 地图 ​

地图核心对象，地图控件、覆盖物、图层等需作为其子组件，以获得 map 的实例化对象

ts
import { BMap } from 'vue3-baidu-map-gl'

渲染地图 ​

多实例 ​

个性化地图 ​

通过指定 Map 组件的 mapStyleId 或者 mapStyleJson 来展示个性化地图，如果同时指定，mapStyleId 会优先生效。

提示

  1. 如果个性化地图没有生效，请先检查 mapStyleId 或 mapStyleJson 是否正确。如果是通过 mapStyleId 实现，还需要检查是否与 ak 申请的账号一致
  2. 以下示例使用的 mapStyleId 均与 ak 和域名绑定，无法直接复制使用。可根据示例主题名字到百度地图个性化编辑器创建后使用

获取资源 ​

mapStyleId 和 mapStyleJson 获取以及相关注意事项，请访问百度地图个性化地图相关文档知悉

出行主题示例 ​

赛博朋克主题示例 ​

自定义地图加载中 ​

默认情况下，地图加载中效果是 map loading... 文字居中。如果不能满足你的需求，你可以通过提供 loading 具名插槽来自定义地图加载中显示效果。

显示代码
html
<template>
  <BMap>
    <template #loading>
      <div class="spinner">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
      </div>
    </template>
  </BMap>
</template>

<style lang="css">
  .spinner {
    width: 60px;
    height: 60px;

    position: relative;
    margin: 100px auto;
  }

  .double-bounce1,
  .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #42b883;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-animation: bounce 2s infinite ease-in-out;
    animation: bounce 2s infinite ease-in-out;
  }

  .double-bounce2 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
  }

  @-webkit-keyframes bounce {
    0%,
    100% {
      -webkit-transform: scale(0);
    }
    50% {
      -webkit-transform: scale(1);
    }
  }

  @keyframes bounce {
    0%,
    100% {
      transform: scale(0);
      -webkit-transform: scale(0);
    }
    50% {
      transform: scale(1);
      -webkit-transform: scale(1);
    }
  }
</style>

静态组件 props ​

属性说明类型可选值默认值版本
ak百度地图 akstring---
apiUrl自建地图 api 资源地址（一般用于离线地图）string--^2.3.0
minZoom地图允许展示的最小级别number0-210-
maxZoom地图允许展示的最大级别number0-2121-
backgroundColor地图背景颜色, rgba 数组 number[]-[245, 245, 245, 100]^2.1.0
showControls是否显示室内图boolean-false-
restrictCenter是否限制中心boolean-true^1.1.3
plugins需要注册的插件['TrackAnimation', 'Mapvgl', 'Mapv', 'MapvThree']---
pluginsSourceLink自定义插件资源地址Record<'TrackAnimation' | 'Mapvgl' | 'Mapv' | 'MapvThree', string>---

动态组件 Props ​

属性说明类型默认值版本
width地图显示宽度string / number100%^1.0.1
height地图显示高度string / number550px^1.0.1
center地图默认中心点，可使用城市名，如：北京市，也可以使用对象如 {lng: 121.424333, lat: 31.228604} 表示经纬度。string / {lng: number, lat: number}北京市-
heading地图旋转角度number0-
tilt地图倾斜角度number0 -
mapType地图类型 mapTypestringBMAP_NORMAL_MAP-
zoom地图缩放级别number14-
displayOptions自定义地图属性 详见---
mapStyleId个性化地图样式 ID 详见string--
mapStyleJson个性化地图样式 Json 详见{featureType: string...}[]--
enableTraffic是否启用交通路况图层booleanfalse-
enableDragging启用地图拖拽booleantrue-
enableInertialDragging启用地图惯性拖拽booleantrue-
enableScrollWheelZoom允许地图可被鼠标滚轮缩放booleanfalse-
enableContinuousZoom开启双击平滑缩放效果booleantrue-
enableResizeOnCenter开启图区 resize 中心点不变booleantrue-
enableDoubleClickZoom启用地图双击缩放，左键双击放大、右键双击缩小booleanfalse-
enableKeyboard启用键盘操作，键盘的上、下、左、右键可连续移动地图。同时按下其中两个键可使地图进行对角移动。PgUp、PgDn、Home 和 End 键会使地图平移其 1/2 的大小。 +、-键会使地图放大或缩小一级booleantrue-
enablePinchToZoom启用双指缩放地图booleantrue-
enableAutoResize启用自动适应容器尺寸变化booleantrue-
enableIconClick是否启用底图可点击booleantrue^2.1.0
loadingBgColor加载背景图颜色string#f1f1f1^2.1.0
loadingTextColor加载文字图颜色string#999^2.1.0

地图类型 ​

值描述
BMAP_NORMAL_MAP标准地图
BMAP_EARTH_MAP地球模式
BMAP_SATELLITE_MAP普通卫星地图

注意

地球模式 (BMAP_EARTH_MAP) 下能支持的地图交互操作有限，如您需要卫星地图支持和标准地图 (BMAP_NORMAL_MAP) 一致的交互体验，请使用普通卫星图模式 (BMAP_SATELLITE_MAP)

displayOptions ​

属性说明类型默认值
poi是否显示地图上的地点标识booleantrue
indoor是否显示室内图booleantrue
poiText是否显示地图上的地点标识文字booleantrue
poiIcon是否显示地图上的地点标识图标booleantrue
overlay是否显示覆盖物booleantrue
layer是否显示叠加图层，地球模式暂不支持booleantrue
building是否显示 3D 建筑物（仅支持 WebGL 方式渲染的地图）booleantrue
street是否显示路网（只对卫星图和地球模式有效）booleantrue
skyColors配置天空的颜色，数组中首个元素表示地面颜色，第二个元素表示天空颜色。从而形成渐变，支持只传入一个元素[string, string]-

组件方法 ​

方法说明类型
getMapInstance父组件获取 map 实例方法() => void
getBaseMapOptions父组件/外部获取 map 组件 options() => void
resetCenter重置地图中心() => void
setDragging设置地图是否可拖动(nableDragging: boolean) => void

组件事件 ​

事件名说明类型
initd组件初始化后会触发此事件，返回一个地图实例{ map, BmapGL, instance }
unload组件卸载时会触发此事件-
pluginReady插件加载完毕会触发此事件{map, pluginRecord}
click左键单击地图时触发此事件。 当双击时，产生的事件序列为： click click dblclick{type, target, latlng, pixel, overlay}
dblclick鼠标双击地图时会触发此事件{type, target, pixel, point}
rightclick右键单击地图时触发此事件。 当双击时，产生的事件序列为： rightclick rightclick rightdblclick{type, target, latlng, pixel, overlay}
rightdblclick右键双击地图时触发此事件{type, target, latlng, pixel, overlay}
maptypechange地图类型发生变化时触发此事件{type, target}
mousemove鼠标在地图区域移动过程中触发此事件{type, target, latlng, pixel, overlay}
mouseover鼠标移入地图区域时触发此事件{type, target}
mouseout鼠标移出地图区域时触发此事件{type, target}
movestart地图移动开始时触发此事件{type, target}
moving地图移动过程中触发此事件{type, target}
moveend地图移动结束时触发此事件{type, target}
zoomstart地图更改缩放级别开始时触发触发此事件{type, target}
zoomend地图更改缩放级别结束时触发触发此事件{type, target}
addoverlay当组件被挂载到地图中时会触发此事件{type, target}
removeoverlay当组件被移除时会触发此事件{type, target}
addcontrol当组件被挂载到地图中时会触发此事件{type, target}
removecontrol当组件被移除时会触发此事件{type, target}
clearoverlays当使用方法一次性移除全部覆盖物时会触发此事件{type, target}
dragstart开始拖拽地图时触发{type, target, pixel, point}
dragging拖拽地图过程中触发{type, target, pixel, point}
dragend停止拖拽地图时触发{type, target, pixel, point}
addtilelayer添加一个自定义地图图层时触发此事件{type, target}
removetilelayer移除一个自定义地图图层时触发此事件{type, target}
load调用方法时会触发此事件。这表示位置、缩放层级已经确定，但可能还在载入地图图块{type, target}
resize地图可视区域大小发生变化时会触发此事件{type, target, pixel, point}
hotspotclick点击热区时触发此事件{type, target}
hotspotover鼠标移至热区时触发此事件{type, target}
hotspotout鼠标移出热区时触发此事件{type, target}
tilesloaded当地图所有图块完成加载时触发此事件{type, target}
touchstart触摸开始时触发此事件，仅适用移动设备{type, target}
touchmove触摸移动时触发此事件，仅适用移动设备{type, target}
touchend触摸结束时触发此事件，仅适用移动设备{type, target}
longpress长按事件，仅适用移动设备{type, target}

Released under the MIT License.

Copyright © 2022-present dh and all contributors