一、引入
因为用的场景较多，抽离为组件，
首先添加 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./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).BMaponMounted(() => {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>
