百度地图BaiduMap组件
场景
在 vue 项目内引入百度地图组件，目标是做到地图展示指定位置、手动标记、获取标记位置等
环境准备
百度开发者账号，和百度地图分配的用于访问地图组件的ak
封装
在此列出同事对百度地图组件的简单封装
<template>
<div id="container"></div>
</template>
<script>
import { Message } from "element-ui";
export default {
name: "BaiDuMap",
data() {
return {
map: null,
marker: null,
};
},
mounted() {},
methods: {
/* 自动初始化 */
mapInit(options) {
this.loadJScript(options); // 异步加载地图
},
loadJScript(options) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = `https://api.map.baidu.com/getscript?v=3.0&ak=${options.ak}`;
document.body.appendChild(script);
script.onload = () => {
this.init(options);
};
},
// 初始化地图
init(options) {
this.map = new BMap.Map("container", {
coordsType: options.coordsType, // coordsType指定输入输出的坐标类型，3为gcj02坐标，5为bd0ll坐标，默认为5。 // 指定完成后API将以指定的坐标类型处理您传入的坐标
}); // 创建地图实例
if (this.isMap()) {
// 判断是否初始化成功
var point = new BMap.Point(options.point.lng, options.point.lat); // 创建点坐标
this.map.centerAndZoom(point, options.zIndex); // 初始化地图，设置中心点坐标和地图级别
this.map.enableScrollWheelZoom(options.zoom); // 开启鼠标滚轮缩放
if (options.isMarker) {
// 是否开启初始化标注
this.mapMarkerClear();
this.addMapMarker(options.markerPoint, options.enableDragging); // 初始化标注坐标
}
} else {
Message.error({
message: "地图加载失败，请检查地图是否正确加载",
});
}
},
// 关键字检索
mapLocalSearch(keyString) {
const { map } = this;
if (map) {
var local = new BMap.LocalSearch(map, {
renderOptions: { map: map },
});
var result = local.search(keyString);
}
},
// 判断地图是否初始化成功
isMap() {
const { map } = this;
if (map) {
return true;
} else {
return false;
}
},
// 清空地图上所有覆盖物
mapMarkerClear() {
const { map } = this;
if (map) {
return map.clearOverlays();
}
},
// 获取所有覆盖物
getOverlays() {
const { map } = this;
if (map) {
return map.getOverlays();
}
},
// 获取可拖拽标注对象的坐标对象
getMapMarkerPosition() {
const { marker } = this;
if (marker) {
return marker.getPosition();
}
},
// 根据坐标对象创建可拖拽标注 传{lng: 116.404, lat: 39.915}
addMapMarker(point, enableDragging) {
if (window.BMap) {
this.marker = new BMap.Marker(point, {
enableDragging: enableDragging,
});
this.map.addOverlay(this.marker);
}
},
// 获取地图中心点对象
getMapCenter() {
var cen = this.map.getCenter();
return {
lng: cen.lng.toFixed(5), // 左
lat: cen.lat.toFixed(5), // 右
};
},
// 动图回归初始位置
resetMap() {
this.map.reset();
},
// 设置地图中心点
setCenter(lng, lat) {
var point = new map.Point(lng, lat);
map.setCenter(point);
console.log("setCenter", point);
},
},
};
</script>
<style>
#container {
width: 100%;
height: 100%;
}
</style>
组件内提供了若干方法如组件初始化mapInit(options)、按关键字检索位置mapLocalSearch、建立坐标addMapMarker等，将组件放入vue项目的components目录下
引用
在需要使用组件的页面中引入组件
<template>
其它 html 代码
<div class="map-box">
<bai-du-map ref="map"></bai-du-map>
</div>
其它 html 代码
</template>
<script>
// 其它一些引入
import <others>
// 引入百度地图组件
import BaiDuMap from "../../components/BaiduMap/BaiDuMap.vue";
export default{
components:{ BaiDuMap , ...}
}
</script>
使用
组件默认是由手动进行初始化的，即调用组件的mapInit(options)方法，这是因为在实际项目中地图参数是存储在DB中的，正确的逻辑顺序是从DB获取数据之后将有关数据作为参数传递给地图组件再进行初始化以保证地图正确显示相关内容，否则地图组件可能出现初始化错误或初始化后内容错误等问题。
如需自动初始化，可以在组件的
mounted方法内运行mapInit(options)
- 从数据源获取与地图有关数据参数
let options = {
ak: "baidu map access token", // 百度地图申请的AK
coordsType: 5, // coordsType指定输入输出的坐标类型，3为gcj02坐标，5为bd0ll坐标，默认为5。 // 指定完成后API将以指定的坐标类型处理您传入的坐标
point: {"lng":xxx, "lat":xxx}, // 地图初始化坐标 { lng: -74.00666, lat: 40.71643 }
zIndex: 15, // 地图级别
zoom: true, // 是否开启鼠标滚轮缩放
isMarker: true, // 是否初始化一个标注
markerPoint: {"lng":xxx, "lat":xxx}, // 初始化的标注坐标
enableDragging: true, // 初始化的标注是否可拖拽
}
- 手动初始化组件
this.$refs.map.mapInit(options)
- 调用封装方法实现业务需要
以手动创建地图标记为例，方法将清除地图上所有覆盖物，然后在地图中心位置建立一个可拖动的红色标记
handleMapMarker() {
this.$refs.map.mapMarkerClear(); // // 清空地图上所有覆盖物
this.$refs.map.addMapMarker(this.$refs.map.getMapCenter(), true);
}
