Introduction method reference:Baidu map offline map realizes drawing polygons and echoing polygon areas_Holly31's blog-CSDN blog
Red editing point: Click on the map to add a new one or assign it based on data. You can drag or click to move it.
ps: Because the el-scrollbar is added to the outer layer of the map, it will interfere with the zooming of the map, so I wrote a method to zoom.
offlineMarke.vue
<template>
<div class="markmap">
<div :id="mapId" class="allmap" />
</div>
</template>
<script>
export default {
props: {
canAddMarker: {
type: Boolean,
default: false,
},
searchKeyword: String,
strokeColor: {
type: String,
default: "#2A8DFF",
},
path: {
type: String,
default:"",
},
markers: {
type: Array,
default:()=>[],
},
pcenter: {
type: Object,
default: () => ({
lng: 114.97731018066408,
lat: 25.8246784210205,
}),
},
},
components: {},
data() {
return {
markersOverlay:[],
mapId: "map" + new Date().getTime(),
zoom: 13,
center: {
lng: 114.97731018066408,
lat: 25.8246784210205,
},
};
},
watch: {
searchKeyword: {
handler(val) {
if (val) {
this.localSearchFun();
}
},
},
pcenter: {
handler(val) {
const point=new BMap.Point(val.lng,val.lat);
this.map.setCenter(point, );
},
},
markers: {
handler(arr) {
if(arr&&arr.length>0){
if(this.markersOverlay&&this.markersOverlay.length>0){
this.markersOverlay.forEach(item=>{
this.map.removeOverlay( item);
})
}
this.$nextTick(() => {
arr.forEach(item=>{
this.customMarkerOverlay(item);
})
},1000)
}
},
deep: true,
immediate:true
},
path: {
handler(val,oldVal) {
if (val) {
this.$nextTick(() => {
this.drawDefault(val);
}, 1000);
}
},
immediate: true,
deep: true,
},
},
computed: {
},
created() {
this.mapId = "map" + new Date().getTime();
},
mounted() {
this.initMap();
},
methods: {
//默认多边形
drawDefault(points) {
if (points) {
let newPonits = [];
let arr = points.split(";");
arr.forEach((item) => {
let itemArr = item.split(",");
newPonits.push(new BMap.Point(itemArr[0], itemArr[1]));
});
const polygon = new BMap.Polygon(newPonits, {
strokeColor: this.strokeColor,
strokeWeight: 4,
strokeOpacity: 1,
fillColor: this.strokeColor,
fillOpacity: 0.2,
});
this.map.removeOverlay(this.polygonOverlay);
this.map.addOverlay(polygon);
this.map.setCenter(newPonits[0]);
this.polygonOverlay=polygon;
}
},
//地图初始化
initMap() {
const _this = this;
const point = new BMap.Point(114.97731018066408, 25.8246784210205);
_this.map = new BMap.Map(this.mapId, { enableMapClick: false,minZoom:4,maxZoom:19 }); // 创建Map实例,GL版命名空间为BMap(鼠标右键控制倾斜角度)
_this.map.centerAndZoom(point, this.zoom); // 初始化地图,设置中心点坐标和地图级别
/* _this.map.enableScrollWheelZoom(true); */ // 开启鼠标滚轮缩放
_this.suofang();
/* _this.cerateMarker(point); */
this.map.addControl(new BMap.NavigationControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}));//type:BMAP_NAVIGATION_CONTROL_ZOOM type:BMAP_NAVIGATION_CONTROL_SMALL,enableGeolocation:true
this.map.addControl(new BMap.GeolocationControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));
this.map.addEventListener("click", function (e) {
_this.mapClickFun(e);
});
},
/* 标记点 */
createMarkerDOM(markerObj) {
const img = document.createElement("img");
img.style.height = "50px";
img.style.width = "50px";
img.src = markerObj.src;
img.draggable = markerObj.dragging;
return img;
},
customMarkerOverlay(markerObj) {
const _this=this;
let myIcon = new BMap.Icon(markerObj.icon, new BMap.Size(45, 45));
let pt = new BMap.Point(markerObj.lng, markerObj.lat);
var marker = new BMap.Marker(pt, {
icon: myIcon,
enableDragging: markerObj.dragging,
oType:'marker',
offset:markerObj.offset?new BMap.Size(...markerObj.offset):new BMap.Size(5,-17)
});
this.map.addOverlay(marker);
this.markersOverlay.push(marker);
// 绑定点击事件
marker.addEventListener("click", function (e) {
console.log("eeee", e);
});
//绑定拖拽事件
marker.addEventListener("dragend", function (e) {
_this.$emit("updateMarkerLocal", e.point);
});
},
cerateMarker(point) {
const marker = new BMap.Marker(point);
// 将标记点添加到地图上
this.map.addOverlay(marker);
},
handlerMap({ BMap, map }) {
this.BMap = BMap;
this.map = map;
},
//点击地图事件 增加标记点
mapClickFun(ev) {
if (this.canAddMarker) {
this.$emit("updateMarkerLocal", ev.point);
}
},
//缩放
suofang() {
document.querySelector(".markmap").onmousewheel = (e) => {
e = e || window.event;
if (e.stopPropagation) {
//这是取消冒泡
e.stopPropagation();
} else {
e.cancelBubble = true;
}
if (e.preventDefault) {
//这是取消默认行为，要弄清楚取消默认行为和冒泡不是一回事
e.preventDefault();
} else {
e.returnValue = false;
}
//放大 getZoom返回地图当前缩放级别
if (e.wheelDelta > 0) {
this.zoom = this.zoom + 1;
if (this.zoom > 19) {
this.zoom=19;
}
}
//缩小
if (e.wheelDelta < 0) {
e.cancelBubble = true;
this.zoom = this.zoom - 1;
if (this.zoom < 4) {
this.zoom = 4;
}
}
this.map.setZoom(this.zoom);
};
},
//拖拽标记
markerDragendEvent(e) {
const _this = this;
_this.$emit("updateMarkerLocal", e.point);
},
//关键词搜索
localSearchFun(searchWord) {
const _this = this;
this.$nextTick(() => {
const local = new BMap.LocalSearch(this.map, {
onSearchComplete: function (e) {
_this.$emit("searchcomplete", e);
},
});
local.search(searchWord ? searchWord : this.searchKeyword);
});
},
},
};
</script>
<style lang="scss" scoped>
.markmap {
width: 800px;
height: 500px;
.allmap {
width: 100%;
height: 100%;
}
}
</style>Page usage
<template>
<div class="">
<offlineMarke
ref="mydrawMap"
class="mymap-wrap"
:canAddMarker="canAddMarker"
:path="path"
:strokeColor="strokeColor"
:pcenter="center"
:markers="markers"
@updateMarkerLocal="updateMarkerLocal"
></offlineMarke>
</div>
</template>
<script>
import offlineMarke from "@/components/Map/offlineMarke";
export default {
props: [],
components: { offlineMarke },
data() {
return {
canAddMarker: true,
strokeColor: "#FF6B36",
center:{
lng: "114.933625",
lat: "25.85190",
},
path: "114.92785540582945,25.83652466645269;114.92823026067752,25.847650021588933;114.93326455552047,25.84679557530646;114.94444120792562,25.847283346808027;114.94666935084885,25.846470393187857;114.94991319176417,25.844372292159633;114.9536417373817,25.840323628122093;114.95646285382479,25.83860005841268;114.96159150781574,25.83115605191992;114.96356808621543,25.824976622119365;114.9643227797862,25.82133385975571;114.9613758810813,25.81834150683285;114.9581414800636,25.816454984607688;114.95318206516998,25.81499128286883;114.950630482145,25.813495035728792;114.94502418704789,25.80816043559642;114.93953141347649,25.80412817087722;114.93648047520966,25.807707561717777;114.94762118982572,25.816164775470398;114.93985862738357,25.82410099603871;114.94194301915044,25.826117491923867;114.94172739241593,25.839321438580683;114.93834924024202,25.839256398119232;114.92785540582945,25.83652466645269",
markers: [
{
lng: "114.933625",
lat: "25.85190",
icon: "data:image/png;base64,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",
},
{
lat: "25.826759824838696",
lng: "114.94770203106496",
dragging: true,
icon: "data:image/png;base64,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",
offset: [3, -18],
},
],
};
},
created() {},
mounted() {},
methods: {
updateMarkerLocal(point) {
this.markers[1].lat=point.lat;
this.markers[1].lng=point.lng;
},
},
};
</script>
<style lang="scss" scoped>
</style>