BigScreenUI/src/components/mapBaidu/mapLine.vue

<template>
    <div id="equipmentIdMap" class="map">

    </div>
</template>
  
<script setup lang="ts">
import { getImg } from "@/utils/index"
let map: any = null
let point: any = null
onMounted(() => {
    console.log("map", "map")
    initMap()
})

const initMap = () => {
    map = new BMap.Map("equipmentIdMap");
    point = new BMap.Point(116.3964, 39.9093)
    map.centerAndZoom(new BMap.Point(116.3964, 39.9093), 18);
    console.log("map", map)
    map.enableScrollWheelZoom();
    setTimeout(() => {

        initCustomDot()
        const startIcon ={
            imgUrl:'/src/assets/img/mapStart.png',
            position:[116.3964, 39.9093],
            size:[60,60]

        }
        initIcon(startIcon.imgUrl,startIcon.position,startIcon.size)


        initPolyline()
    })
}


const initCustomDot = () => {
    function ComplexCustomOverlay(point) {
        this._point = point;

    }
    ComplexCustomOverlay.prototype = new BMap.Overlay();
    ComplexCustomOverlay.prototype.initialize = function (map) {
        const div = this._div = document.createElement("div");
        div.style.position = "absolute";
        div.style.width = "30px";
        div.style.height = "30px";
        div.style.background = "#fff";
        div.style.borderRadius = "50%";
        const divInner = this._divInner = document.createElement("div");
        divInner.style.position = "absolute";
        divInner.style.width = "20px";
        divInner.style.height = "20px";
        divInner.style.left = "5px";
        divInner.style.top = "5px";
        divInner.style.background = "#0788e6";
        divInner.style.borderRadius = "50%";
        map.getPanes().labelPane.appendChild(div);
        map.getPanes().labelPane.appendChild(divInner);

        return div;
    }
    ComplexCustomOverlay.prototype.draw = function () {

        const pixel = map.pointToOverlayPixel(new BMap.Point(116.3964, 39.9093));
        this._div.style.left = pixel.x + "px";
        this._div.style.top = pixel.y + "px";
        this._divInner.style.left = pixel.x + 5 + "px";
        this._divInner.style.top = pixel.y + 5 + "px";
    }
    const myCompOverlay: any = new ComplexCustomOverlay(new BMap.Point(116.3964, 39.9093));
    map.addOverlay(myCompOverlay);
}


const initPolyline = () => {
    var polyline = new BMap.Polyline([
        new BMap.Point(116.3964, 39.9093),
        new BMap.Point(116.3944, 39.9063),
        new BMap.Point(116.3954, 39.9123),
    ], { strokeColor: "blue", strokeWeight: 8, strokeOpacity: 1. });
    map.addOverlay(polyline);
}

const initIcon=(imgUrl:any,position:any,size:any)=>{
    var myIcon = new BMap.Icon("https://api.map.baidu.com/img/markers.png", new BMap.Size(60,60));
    // 创建Marker标注，使用小车图标
    var pt = new BMap.Point(...position);
    var marker = new BMap.Marker(pt, {
        icon: myIcon
    });
    // 将标注添加到地图
    map.addOverlay(marker);
}

</script>
  
<style scoped lang="scss">
.map {
    width: 100%;
    height: 100%;
}
</style>