使用 vue-baidu-map
使用 vue-baidu-map
写在前面
vue-baidu-map 是百度开源的一个基于vue的小众插件，底层使用的是百度 jsapi 1.0 ，版本官网目前最新版是3.0。
开发手册：https://dafrok.github.io/vue-baidu-map/#/zh/index
JS类参考：http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html
完整JSAPI：https://lbsyun.baidu.com/index.php?title=jspopular3.0
下载依赖
yarn add vue-baidu-map全局注册
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'YOUR_APP_KEY'
})基础用法
<template>
<baidu-map class="bm-view">
</baidu-map>
</template>
<style>
.bm-view {
width: 100%;
height: 300px;
}
</style>添加控件
提供了封装好的控件（比例尺、缩放、缩略图、定位、版权、城市列表、全景等）以及自定义控件。
// 在右上角加入比例尺控件
<template>
<baidu-map class="map" center="北京">
<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
</baidu-map>
</template>// 自定义测距控件
<template>
<baidu-map class="map" :zoom="zoom" :center="{lng: 116.404, lat: 39.915}" @ready="setDistanceToolInstance">
<bm-control>
<button @click="openDistanceTool">开启测距</button>
</bm-control>
</baidu-map>
</template>
<script>
import DistanceTool from 'bmaplib.distancetool'
export default {
unmount () {
distanceTool && distanceTool.close()
},
methods: {
setDistanceToolInstance ({map}) {
this.distanceTool = new DistanceTool(map, {lineStroke : 2})
},
openDistanceTool (e) {
const {distanceTool} = this
distanceTool && distanceTool.open()
}
}
}
</script>添加覆盖物
提供了点、海量点、折线、多边形、圆形、图标、标签、信息窗体和自定义覆盖物等覆盖物，文档写的很清楚，这里不做赘述。
完整代码
贴一份完整代码
// bmap.vue
<template>
<div id="bmap">
<baidu-map
class="bm-view"
:center="center"
:zoom="zoom"
@ready="handlerShowMap"
:scroll-wheel-zoom="true"
>
<!-- 比例尺 -->
<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
<!-- 缩放 -->
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
<!-- 地图类型 -->
<bm-map-type
:map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
anchor="BMAP_ANCHOR_TOP_LEFT"
></bm-map-type>
<!-- 定位 -->
<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
<!-- 城市列表 -->
<bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT" :offset="offsetCitiList"></bm-city-list>
<!-- 版权 -->
<bm-copyright
anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
:copyright="[{id: 1, content: '<a href=\'https://www.yfanan.com/\' target=\'_blank\'>湖南仪峰安安网络科技股份有限公司</a>版权所有'}]"
></bm-copyright>
<!-- [自定义控件] 添加标记点 -->
<bm-control :offset="offsetMarker">
<button @click="handlerAddMarker">添加点</button>
</bm-control>
<!-- [自定义控件] 添加多边形的点 -->
<bm-control :offset="offsetPolygon">
<button @click="handlerAddPolygonPoint">新增多边形的点</button>
</bm-control>
<!-- [自定义控件] 添加多边形的点 -->
<bm-control :offset="offsetPolyline">
<button @click="addPolylinePoint">新增折线的点</button>
</bm-control>
<!-- 单个点 animation="BMAP_ANIMATION_BOUNCE" -->
<bm-marker v-for="(item, index) in markers" :key="index" :position="item" :dragging="true">
<bm-label
:content="item.content"
:labelStyle="{color: 'red', fontSize : '12px'}"
:offset="{width: 0, height: 30}"
/>
</bm-marker>
<!-- 添加可编辑的折线 -->
<bm-polyline
:path="polylinePath"
stroke-color="blue"
:stroke-opacity="0.5"
:stroke-weight="2"
:editing="true"
@lineupdate="updatePolylinePath"
></bm-polyline>
<!-- 海量点 -->
<bm-point-collection
:points="points"
shape="BMAP_POINT_SHAPE_STAR"
color="red"
size="BMAP_POINT_SIZE_SMALL"
@click="clickHandler"
></bm-point-collection>
<!-- 添加可编辑的多边形 -->
<bm-polygon
:path="polygonPath"
stroke-color="blue"
:stroke-opacity="0.5"
:stroke-weight="2"
:editing="true"
@lineupdate="updatePolygonPath"
/>
<!-- 添加可编辑的圆形 -->
<bm-circle
:center="circlePath.center"
:radius="circlePath.radius"
stroke-color="blue"
:stroke-opacity="0.5"
:stroke-weight="2"
@lineupdate="updateCirclePath"
:editing="true"
></bm-circle>
</baidu-map>
</div>
</template>
<script lang='ts'>
import { Component, Vue } from "vue-property-decorator";
import axios from "axios";
import { initMqtt } from "@/utils/mqtt";
interface IPoint {
lng: Number; // longitude 经度
lat: Number; // latitude 纬度
content?: string; // content 信息
}
interface ISize {
width: Number; // 水平方向的数值
height: Number; // 竖直方向的数值
}
interface ICirclePath {
center: IPoint;
radius: Number;
}
@Component
export default class BMap extends Vue {
// 初始化配置
private center: IPoint = { lng: 0, lat: 0 };
private zoom: number = 0;
private offsetCitiList: ISize = {
width: 10,
height: 50
};
// 标记点功能按钮偏移量
private offsetMarker: ISize = {
width: 10,
height: 100
};
// 新增多边形路径功能按钮的偏移量
private offsetPolygon: ISize = {
width: 10,
height: 150
};
// 新增折线路径功能按钮的偏移量
private offsetPolyline: ISize = {
width: 10,
height: 200
};
// 新增圆形的配置
private circlePath: ICirclePath = {
center: {
lng: 116.404,
lat: 39.915
},
radius: 500
};
// 折线点的集合
private polylinePath: IPoint[] = [
{ lng: 116.404, lat: 39.915 },
{ lng: 116.405, lat: 39.92 },
{ lng: 116.423493, lat: 39.907445 }
];
// 海量点的集合
private points: any = [];
// 可编辑多边形的点集
private polygonPath: IPoint[] = [
{ lng: 116.412732, lat: 39.911707 },
{ lng: 116.39455, lat: 39.910932 },
{ lng: 116.403461, lat: 39.921336 }
];
// 标记点的集合
private markers: IPoint[] = [{ lng: 116.404, lat: 39.915, content: "张三" }];
// 新增标记点
private handlerAddMarker(): void {
this.markers.push({ lng: 116.4, lat: 39.915, content: "李四" });
}
// 单击海量点的某个
clickHandler(e: any) {
alert(`单击点的坐标为：${e.point.lng}, ${e.point.lat}`);
}
// 添加点
addPoints() {
const points = [];
for (var i = 0; i < 1000; i++) {
const position = {
lng: Math.random() * 40 + 85,
lat: Math.random() * 30 + 21
};
points.push(position);
}
this.points = points;
}
// 更新折线路径
updatePolylinePath(e: any) {
this.polylinePath = e.target.getPath();
}
// 新增折线路径点
addPolylinePoint() {
this.polylinePath.push({ lng: 116.404, lat: 39.9 });
}
// 修改多边形的点集
updatePolygonPath(e: any) {
this.polygonPath = e.target.getPath();
}
// 新增多边形的点
handlerAddPolygonPoint() {
this.polygonPath.push({ lng: 116.404, lat: 39.915 });
}
// 修改圆形的路径
updateCirclePath(e: any) {
this.circlePath.center = e.target.getCenter();
this.circlePath.radius = e.target.getRadius();
}
/**
* 初始化地图
* 1、BaiduMap组件容器本身是一个空的块级元素，如果容器不定义高度，百度地图将渲染在一个高度为 0 不可见的容器内。
* 2、没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。当center属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。
* 3、由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。
* 因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。
*/
private handlerShowMap({ BMap, map }: any): void {
console.log(BMap, map);
this.center.lng = 116.404;
this.center.lat = 39.915;
this.zoom = 15;
// 初始化海量点
this.addPoints();
}
private mounted() {
initMqtt();
}
}
</script>
<style lang="scss" scoped>
.bm-view {
width: 100%;
height: calc(100vh);
}
</style>运行效果
如图
总结
vue-baidu-map 参考文档和 JSAPI 很容易上手，同时提供的功能远不如完整的 JSAPI，酌情考虑选择
本文参与?腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-05-07 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
容器服务
腾讯云容器服务（Tencent Kubernetes Engine, TKE）基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务，覆盖 Serverless、边缘计算、分布式云等多种业务部署场景，业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者，主导开源项目Crane，全面助力客户实现资源优化、成本控制。