第一步引入百度地图
第二步页面直接使用
<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 // 销毁地图实例
})