Vue3使用百度地图本文记录了开发过程中vue3+百度地图的使用过程，包括安装与注册、使用地图容器API、使用控件、使用

引言

本文记录本次开发中vue3+百度地图的使用过程，包括安装与注册、使用地图容器API、使用控件、使用点覆盖物和使用第三方组件库实现点聚合。本文参考官方文档 vue-baidu-map-3x。

一、安装与注册使用

安装

采用npm安装，对于vue3，执行命令：

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

全局注册

采用全局注册方式可以一次性注入所有组件。

在main.ts文件中引入组件，添加如下代码。注册之后BaiduMap中包含的标签都可以直接在文件中使用了，具体内容可以在vue-baidu-map-3x模块中查看。

import BaiduMap from 'vue-baidu-map-3x'
app.use(BaiduMap, {
    // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
    ak: '具体密钥',
  });

一个简单的使用例子如下：

<template>
    <baidu-map class="bm-view" :center="北京">
    </baidu-map>
</template>

<style>
    .bm-view {
      width: 800px;
      height: 600px;
    }
</style>

二、地图容器API

BaiduMap百度地图容器，用于挂载百度地图核心类和一个百度地图实例，是所有地图组件的根组件，标签为<baidu-map>。

使用到的属性如下，使用方式是 :属性名="属性值"

属性名	类型	默认值	描述
center	Point / String	无	定位, 可使用如“广州市海珠区”的地区字符串，也可以使用对象如 {lng: 116.404, lat: 39.915} 表示经纬度。
zoom	Number	无	缩放等级
scroll-wheel-zoom	Boolean	false	允许鼠标滚轮缩放

示例代码，定位在郑州，缩放等级15，允许鼠标滚轮缩放。

<baidu-map class="bm-view" center="郑州" :zoom="15" :scroll-wheel-zoom="true" ></baidu-map>

三、控件

比例尺

比例尺控件的标签是<bm-scale>。使用到的属性有：

属性名	类型	默认值	描述
anchor	ControlAnchor	无	控件停靠位置

示例代码，将比例尺放在地图的右上方。

<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>

定位

定位控件的标签是<bm-geolocation>。使用到的属性有：

属性名	类型	默认值	描述
anchor	ControlAnchor	无	控件停靠位置
showAddressBar	Boolean	True	是否显示定位信息面板
autoLocation	Boolean	False	添加控件时是否进行定位。根据 W3C相关标准描述，为保证用户隐私安全，geoLocation API 必须使用 SSL 连接，并获得用户的手动许可。请确保使用该属性时满足上述条件。

示例代码，将定位控件放在地图的右下角。

<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>

城市列表

城市列表控件仅在地图视图尺寸比较大的时候生效，可以通过它切换要展示的城市。它的标签为<bm-city-list>。

使用到的属性有：

属性名	类型	默认值	描述
anchor	ControlAnchor	无	控件停靠位置

示例代码，将城市列表控件放在地图左上角。

<bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>

四、覆盖物

点

点的标签为<bm-marker>。

使用到的属性有：

属性名	类型	默认值	描述
position	Point	无	标注的位置

使用到的事件如下，使用方式是 @事件名="函数调用"

事件名	参数	描述
mouseover	{type, target}	鼠标移入此区域时触发此事件

示例代码如下，以点的方式展示treeData中的数据，当鼠标放上时调用展示信息的函数。

<bm-marker v-for="item in treeData" :position="item.position" @mouseover="showInfo(item)"></bm-marker>

信息窗体

信息窗体的标签为<bm-info-window>。

使用到的属性有：

属性名	类型	默认值	描述
show	Boolean	False	信息窗口是否开启
position	Point	无	信息窗体所指坐标

示例代码如下，当鼠标移动到点上时，显示信息窗体展示点的信息。

<bm-info-window :show="infoWindowOpened" :position="infoWindowPosition">
  <div>{{ infoWindowContent }}</div>
</bm-info-window>

五、第三方组件库

第三方组件库中的内容不参与全局注册，因此使用时根据自己的需要进行全局注册或者局部注册。

点聚合

BmlMarkerClusterer 能够聚合它包含的所有 BmMarker 组件.

首先进行组件的注册，一定要使注册的标签和实际使用的标签保持一致。在这里采用全局注册，在main.ts中添加如下代码，注册标签<bm-marker-clusterer>。

import {BmlMarkerClusterer} from 'vue-baidu-map-3x'
app.component('bm-marker-clusterer', BmlMarkerClusterer);

使用到的属性有：

属性名	类型	默认值	描述
averageCenter	Boolean	False	单个聚合的落脚点是否是聚合内所有标记的平均中心

示例代码如下，使得上述添加的点在缩放过程中实现相近的点聚合。

<bm-marker-clusterer :averageCenter="true" >
      <bm-marker v-for="item in treeData" :position="item.position" @mouseover="showInfo(item)"></bm-marker>
</bm-marker-clusterer>

实现的效果为：

地图图片.png