百度地图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 = `<div><div class="map-house-center"><label>
                        ${
      
      props.label}
                        </label><br>
                        <span class='icon-list-icon'></span>
                        </div></div>`;
                    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>

效果：