一、引入
因为用的场景较多,抽离为组件,
首先添加 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>