记录一下自己学习百度地图写的代码
<template>
<el-dialog
:title="mapTitle"
custom-class="map-box"
:visible.sync="mapShow"
width="80%"
:close-on-press-escape="false"
:close-on-click-modal="false"
@open="initMap"
@close="resetSelect"
>
<div class="map-container">
<div class="top">
<el-descriptions :column="2">
<el-descriptions-item label="当前车辆位置">{{
currentPosition
}}</el-descriptions-item>
</el-descriptions>
</div>
<div class="bottom">
<div id="myMap" class="bm-view"></div>
</div>
</div>
</el-dialog>
</template>
<script>
export default {
components: {
},
props: {
courier: {
type: String,
},
isTransit: Boolean, // 是否在途(true:在途 false:已签收)
mapOrder: {},
},
mapTitle: {
type: String,
default: "",
},
},
computed: {
getImagePath() {
return require("@/assets/images/车.svg");
},
},
data() {
return {
center: { lng: 0, lat: 0 },
zoom: 3,
currentPosition: "",
mapShow: false,
points: [],
// 起点(车辆出发位置)
startPoint: {},
// 目前车辆所在位置
endPoint: {},
map: null,
trackNode: {
{ lnt: 110, lat: 20 },
{ lnt: 111, lat: 21 },
{ lnt: 112, lat: 22 },
},
};
},
methods: {
// 展示地图窗口
async showMap() {
this.mapShow = true;
},
// 初始化地图
async initMap() {
this.$nextTick(async () => {
await this.addPoints();
// 初始化地图实例
this.map = new BMapGL.Map("myMap");
// 初始化节点对象数组
var points = this.points.map((item) => {
return new BMapGL.Point(item.lng, item.lat);
});
var index = points.length;
// 定义地图的中心点和缩放等级
this.map.centerAndZoom(
points[0],
12
);
// 绘制折线
var polyline = new BMapGL.Polyline(points, {
strokeColor: "blue",
strokeWeight: 2,
strokeOpacity: 0.5,
});
this.map.addOverlay(polyline);
// 绘制起点
var startMarker = new BMapGL.Marker(points[0]);
this.map.addOverlay(startMarker);
if (this.isTransit) {
// 创建一个小图标对象表示在途
var customIcon = new BMapGL.Icon(
this.getImagePath,
new BMapGL.Size(50, 60),
{
anchor: new BMapGL.Size(10, 50), // 图标的定位点相对于图标左上角的偏移值
}
);
// 创建标注物并添加到地图上
var iconMarker = new BMapGL.Marker(points[index - 1], {
icon: customIcon,
});
this.map.addOverlay(iconMarker);
} else {
//自定义覆盖物
function customOverlay(point, text) {
this._point = point;
this._text = text;
}
// 继承BMapGL.Overlay
customOverlay.prototype = new BMapGL.Overlay();
// 实现initialize方法来创建自定义覆盖物
customOverlay.prototype.initialize = function (map) {
this._map = map;
var pixel = map.pointToOverlayPixel(this._point, {
useRound: false, // 设置此参数,防止抖动
fixPosition: true, // 覆盖物跨越180时修正位置
});
var div = (this._div = document.createElement("div"));
div.style.position = "absolute";
div.style.zIndex = BMapGL.Overlay.getZIndex(this._point.lat);
div.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
div.style.color = "white";
div.style.padding = "4px 8px";
div.style.borderRadius = "4px";
div.style.cursor = "pointer";
div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none";
div.style.fontSize = "12px";
div.style.lineHeight = "1.5";
div.innerHTML = this._text;
map.getPanes().labelPane.appendChild(div);
return div;
};
customOverlay.prototype.draw = function () {
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x - 28 + "px";
this._div.style.top =
pixel.y - 50 - parseInt(this._div.style.padding) + "px";
};
// 创建自定义覆盖物对象
var txt = "已签收";
var myCompOverlay = new customOverlay(points[index - 1], txt);
this.map.addOverlay(myCompOverlay);
var endMarker =
index > 1 ? new BMapGL.Marker(points[index - 1]) : null;
this.map.addOverlay(endMarker);
}
// 创建地理编码实例
var myGeo = new BMapGL.Geocoder();
// 根据坐标得到地址描述
myGeo.getLocation(points[index - 1], (result) => {
if (result) {
this.currentPosition = result.address;
}
});
this.map.enableScrollWheelZoom(true);
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
this.map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
this.map.addControl(zoomCtrl);
});
},
async addPoints() {
const points = this.trackNode.map((item) => {
return {
lng: item.lnt,
lat: item.lat,
};
});
this.points = points;
},
resetSelect() {
this.destroyMap();
this.$emit("closeMap");
},
// 关闭时销毁地图实例
destroyMap() {
this.map.clearOverlays();
this.map.destroy();
this.map = null;
},
},
};
</script>
<style lang="scss">
.bm-view {
width: 100%;
height: 560px;
}
.map-box {
.el-dialog__body {
padding: 0 !important;
}
.el-button--medium {
padding: 10px 20px !important;
}
.map-container {
display: flex;
flex-direction: column;
background: #a2c1f3;
height: 700px;
padding: 10px;
}
}
.top {
flex: 1;
background: #a2c1f3;
padding: 0px;
max-height: 110px;
}
.bottom {
flex: 1;
background: #a2c1f3;
padding: 0px;
// min-width: 100%;
}
</style>