vue3项目中使用百度地图，自定义标注和文本标注

第一步引入百度地图

第二步页面直接使用

<template>

    <div class="homebox">

        <div class="mapp" ref="baiduRef"></div>

        <div class="content"></div>

    </div>

</template>



<script setup>

import { onMounted, onUnmounted, ref, reactive, toRefs } from 'vue'



import drugMarkerIcon from '@/assets/img/map_icon.png' // 引入自定义的标注图片

const props = defineProps({

    lng: {

        type: Number,

        default: () => 116.23920900925275,

    },

    lat: {

        type: Number,

        default: () => 39.89140052910413,

    },

//传入的文本标注内容

    title:{

        type:String

    }

})

let n = ref(props.lng)

let t = ref(props.lat)

const baiduRef = ref()

const map = ref()

const points = ref([{ lng: n, lat: t }])

const markers = ref([])

function initMap() {

    map.value = new BMap.Map(baiduRef.value) // 新建一个map地图实例

    map.value.centerAndZoom(new BMap.Point(points.value[0].lng, points.value[0].lat), 18)

    map.value.enableScrollWheelZoom(true) // 滚轮缩放



    var point = new BMap.Point(points.value[0].lng, points.value[0].lat)

    var myIcon = new BMap.Icon(drugMarkerIcon, new BMap.Size(31, 64))

    let marker = new BMap.Marker(point,{ icon: myIcon })

   

    // 将标注添加到地图中

    map.value.addOverlay(marker)



    //文本标注

    var opts = {

        position: new BMap.Point(points.value[0].lng, points.value[0].lat), // 指定文本标注所在的地理位置

        offset: new BMap.Size(-90, -90), // 设置文本偏移量

    }

    // 创建文本标注对象

    // var label = new BMap.Label('欢迎使用百度地图JSAPI GL版本', opts)

    var label = new BMap.Label(props.title, opts)

    // 自定义文本标注样式

    label.setStyle({

        color: '#000000',

        borderRadius: '8px',

        borderColor: '#fff',

        padding: '12px',

        fontSize: '16px',

        height: '22px',

        lineHeight: '22px',

        fontFamily: '微软雅黑',

        footWeight:'bold'

    })

    map.value.addOverlay(label)

}



onMounted(() => {

    initMap()

})



onUnmounted(() => {

    map.value = null // 销毁地图实例

})