由于公司需求,需要引用百度地图来确定配送范围(覆盖物),本人不是专业前端,只做一个简单分享,可能不是很清晰,有高见望指教。
公司前端是用vue写的,所以百度地图需要先引入百度地图vue的插件
第一步:下载vue百度地图插件
获取地址:链接:百度网盘 请输入提取码
提取码:1212
第二步:页面引入:
import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
export default {
components: {
BaiduMap,
},
第三步:创建地图实例
<div class="map">
<el-input v-model="addressKeyword" placeholder="请输入地址来直接查找相关位置"></el-input>
<!-- 给地图加点击事件getLocationPoint,点击地图获取位置相关的信息,经纬度啥的 -->
<!-- scroll-wheel-zoom:是否可以用鼠标滚轮控制地图缩放,zoom是视图比例
center中心点 map-click:点击地图是否显示标志物-->
<baidu-map v-if="open2"
:center="pointBak"
:zoom="14"
:map-click="false"
:scroll-wheel-zoom="true"
@click="paintPolygon"
@ready="mapReady"
style="width: 400px;height: 400px;border: #1c84c6">
<bm-marker :position="this.pointBak" :dragging="true" @dragend="dragend" >
</bm-marker>
<bm-control>
<button @click="toggle('polygonPath')">{{ polygonPath.editing ? '停止绘制' : '开始绘制' }}</button>
</bm-control>
<bm-local-search :keyword="addressKeyword" :auto-viewport="true" style="display: none"></bm-local-search>
</baidu-map>
</div>
第四步:data中添加属性
baiduMap:undefined,
polygon:undefined,
path: [],
polygonPath: {
editing: false,
paths: [] // 绘制完成后的经纬度,其实是在画的时候动态push的,因为在点击的时候触发了 paintPolygon 函数
},
pointBak:{},
addressKeyword:'',
第五步:编写方法
/*百度地图*/
//控制绘制地图开关
toggle (name) {
if(!this.polygon){
this.addCovering();
}
if(this[name].editing){
this.polygon.disableEditing();
}else {
this.polygon.enableEditing();
}
this[name].editing = !this[name].editing
// 在这里做一步判断,如果有路径且开启绘制就把原来的路径清空
if (this.path && this.polygonPath.editing) {
this.path = []
}
},
// 鼠标右键多边形绘制完成
paintPolygon (e) {
if (!this.polygonPath.editing) {
return
}
this.path = this.polygon.getPath();
this.path.push(e.point);
this.polygon.setPath(this.path);
},
// 当编辑时触发 动态添加点
updatePolygonPath (e) {
console.log(e.target.getPath(),'eee',this.polygonPath.paths[0])
},
//获取当前位置,如果用户同意获取
mapReady({BMap,map}){
let geoLocation = new BMap.Geolocation();
this.baiduMap = map;
if(this.formCustom.id == null){
geoLocation.getCurrentPosition((geolocationResult)=>{
if(geolocationResult.point == null){
this.pointBak = {lat:26.65332482,lng:106.63657676};
}else{
this.pointBak = geolocationResult.point;
}
});
}else{
this.pointBak = {lng:this.formCustom.lng,lat:this.formCustom.lat};
}
this.addCovering();
},
//添加覆盖物
addCovering(){
//创建覆盖物实例polygon
this.polygon = new BMap.Polygon();
this.polygon.setStrokeColor("#999093");
this.polygon.setFillColor("#20B2AA");
this.polygon.setStrokeWeight(3);
this.polygon.getFillOpacity(0.3);
this.polygon.setStrokeStyle("dashed");
let arrPath = [];
if(this.path){
this.path.forEach(item =>{
arrPath.push(new BMap.Point(item.lng,item.lat));
})
}
//set经纬度到地图
this.polygon.setPath(arrPath);
this.baiduMap.addOverlay(this.polygon);
},
/** 根据地址获取经纬度,这里是我有一个选择省市县的框,选择自动调整地图位置*/
addCoutomMarkerProvince(point){
this.pointBak = point;
this.baiduMap.addOverlay(new BMap.Marker(point));
},addCoutomMarkerCity(point){
this.pointBak = point;
this.baiduMap.addOverlay(new BMap.Marker(point));
},addCoutomMarkerCounty(point){
this.pointBak = point;
this.baiduMap.addOverlay(new BMap.Marker(point));
},
// 点击移动中心点 动态获取point
dragend(e){
this.pointBak = e.point;
},
最终效果: