百度地图Api的引入使用-vue3组件

一、引入

因为用的场景较多，抽离为组件，

首先添加 js文件

export function baiduMap() {
    return new Promise(function (resolve, reject) {
        window.baiduMap = function () {
            resolve();
        };
        let script = document.createElement("script");
        script.type = "text/javascript";
        script.src = `https://api.map.baidu.com/api?v=2.0&ak=替换为自己的&callback=baiduMap`;
        script.onerror = reject;
        document.head.appendChild(script);
    });
}

在组件vue代码中引入js，对样式进行调整，添加经纬度

<template>
    <div id="map" :style="{ width: width + 'px', height: height + 'px' }"></div>
</template>
<script>
import { baiduMap } from "./baiduMap";
import { defineComponent, onMounted, nextTick } from "vue";
export default {
    props: {
        // 传入需要定位的经纬度
        //纬度
        latitude: {
            type: Number,
            default: () => {
                return 40.026163;
            },
        },
        //经度
        longitude: {
            type: Number,
            default: () => {
                return 116.473681;
            },
        },
        label: { type: String, default: "在这里" },
        width: {
            type: Number,
            default: 740,
        },
        height: {
            type: Number,
            default: 400,
        },
    },
    setup(props, { emit }) {
        // const BMap = (window as any).BMap
        onMounted(() => {
            nextTick(() => {
                baiduMap().then((mymap) => {
                    // 创建地图实例
                    let map = new BMap.Map("map"); // 创建地图实例
                    let point = new BMap.Point(props.longitude, props.latitude); // 创建点坐标

                    let content = `

                        ${props.label}
                        

                        
                        `;
let label = new BMap.Label(content, {
// 创建文本标注
position: point, // 设置标注的地理位置
// offset: window.BMapGL.Size(10, 20), // 设置标注的偏移量
}); // 创建文本标注对象
map.addOverlay(label); // 将标注添加到地图中
label.setStyle({
// 设置label的样式
color: "#000",
fontSize: "10px",
border: "1px solid #fff",
textAlign: "center",
});
label.setStyle({ border: "0 solid red" });
map.centerAndZoom(point, 15); //设置缩放级别 // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.addEventListener("click", function (e) {
// let a = JSON.parse(e)
console.log("点击的经纬度：" + e.point.lng + "," + e.point.lat); //
emit("update:longitude", e.point.lng);
emit("update:latitude", e.point.lat);
});
});
});
});
},
};
</script>
<style>
.map-house-center {
transform: translateX(-50%);
position: absolute;
left: 50%;
background-color: #f5a623;
padding: 2px 10px;
border-radius: 6px;
color: #fff;
text-align: center;
}
</style>

效果：