效果图
src/utils/baidu-map.ts
declare const window: any;
// 2.0版本
export function baiduMap() {
return new Promise(function (resolve, reject) {
if (typeof window.initBMap !== "undefined") {
resolve(window.initBMap);
return;
}
window.initBMap = function () {
resolve(window.initBMap);
};
const script = document.createElement("script");
script.type = "text/javascript";
script.src = `https://api.map.baidu.com/api?v=2.0&ak=你的ak&callback=initBMap`;
script.onerror = reject;
document.head.appendChild(script);
});
}
页面文件引入
<template>
<div id="mapContainer" style="width: 100%; height: 100%;"></div>
</template>
<script lang="ts">
import {
toRefs,
reactive,
onMounted,
defineComponent,
getCurrentInstance,
} from "vue";
import { baiduMap } from "/@/utils/baidu-map";
let map: any = null;
const _window = window as any;
const projectList = [
{
id: 1,
title: "标题1",
aa: "aa",
bb: "bb",
cc: "cc",
dd: "dd",
longitude: "114.134919",
latitude: "22.618848",
},
{
id: 2,
title: "标题2",
aa: "aa",
bb: "bb",
cc: "cc",
dd: "dd",
longitude: "114.147049",
latitude: "22.658951",
},
{
id: 3,
title: "标题3",
aa: "aa",
bb: "bb",
cc: "cc",
dd: "dd",
longitude: "114.147743",
latitude: "22.719001",
},
];
export default defineComponent({
name: "BMap",
setup() {
// 页面加载时
onMounted(() => {
baiduMap().then(() => {
initMap(); // 创建地图
});
});
const { proxy }: any = getCurrentInstance();
const data = reactive({
zoom: 12,
});
const initMap = async () => {
map = new BMap.Map("mapContainer");
map.centerAndZoom("深圳", data.zoom); // 初始化地图,设置城市和地图级别。
initProjectList();
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用
map.addControl(new BMap.NavigationControl()); // 地图平移缩放控件,默认位于地图左上方,它包含控制地图的平移和缩放的功能。
map.addControl(new BMap.ScaleControl()); // 比例尺控件,默认位于地图左下方,显示地图的比例关系
map.addControl(new BMap.OverviewMapControl()); // 缩略地图控件,默认位于地图右下方,是一个可折叠的缩略地图。
// map.addControl(new BMap.MapTypeControl()); // 地图类型控件,默认位于地图右上方
map.addControl(new BMap.CopyrightControl());
mapEvent();
};
const mapEvent = () => {
// 缩放事件
map.addEventListener("zoomend", (e: any) => {});
// 拖拽事件
map.addEventListener("dragend", (e: any) => {});
};
const openInfoWindow = (item: any) => {
let currentPoint = new BMap.Point(
Number(item.longitude),
Number(item.latitude)
); //创建中心点
var geoc = new BMap.Geocoder();
geoc.getLocation(currentPoint, (rs: any) => {
var currentAddress = rs.address;
let dom = `<div class="map-info-window">
<div class="title">
<div>${item.title}</div>
<div class="close" onclick="$closeInfoWindow()">关闭</div>
</div>
<div class="content">
<div class="cell_left">
<img alt src="https://img1.baidu.com/it/u=2624835088,988907460&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"/>
</div>
<div class="cell_right">
<ul>
<li>
<span class="tit">aaa:</span> ${item.aa}
</li>
<li>
<span class="tit">bbb:</span> ${item.bb}
</li>
<li>
<span class="tit">ccc:</span> ${item.cc}
</li>
<li>
<span class="tit">ddd:</span> ${item.dd}
</li>
<li>
<span class="tit">详细地址:</span> ${currentAddress}
</li>
</ul>
<div class="btn-link">
<button type="button" class="projectDetailBtn" data-item=${disposeJsonStr(
JSON.stringify(item)
)} onclick="$handleProjectDetailBtn()">项目详情</button>
</div>
</div>
</div>
</div>`;
var infoWindows = new BMap.InfoWindow(dom, {});
map.openInfoWindow(infoWindows, currentPoint); // 开启信息窗口 鼠标移
});
};
const initProjectList = async () => {
projectList.forEach(async (item: any) => {
var circle_point = new BMap.Point(
Number(item.longitude),
Number(item.latitude)
); //创建圆的中心点
var circle_radius = 1000; //圆的半径
var circleStyle = {
strokeColor: "red", //边线颜色。
fillColor: "red", //填充颜色。当参数为空时,圆形将没有填充效果。
strokeWeight: 3, //边线的宽度,以像素为单位。
strokeOpacity: 1, //边线透明度,取值范围0 - 1。
fillOpacity: 0.6, //填充的透明度,取值范围0 - 1。
strokeStyle: "solid", //边线的样式,solid或dashed。
};
var circle = new BMap.Circle(circle_point, circle_radius, circleStyle); //创建一个圆
map.addOverlay(circle);
//大圆点击事件
circle.addEventListener("click", function (event: any) {
openInfoWindow(item);
});
//大圆鼠标移出事件
circle.addEventListener("mouseout", function (event: any) {});
//大圆鼠标移入事件
circle.addEventListener("mouseover", function (event: any) {});
});
};
_window.$closeInfoWindow = function closeInfoWindow() {
map.closeInfoWindow();
};
_window.$handleProjectDetailBtn = function handleProjectDetailBtn() {
const dom = document.querySelector(".projectDetailBtn") as HTMLElement;
let item: any = dom.getAttribute("data-item");
item = JSON.parse(item);
console.log("item---", item);
};
// JS去除JSON字符串各种空格、换行符
function disposeJsonStr(str: string) {
return str.replace(/\r\n/g, "").replace(/\n/g, "").replace(/\s+/g, "");
}
return {
...toRefs(data),
};
},
});
</script>
<style scoped lang="scss">
::v-deep(.BMap_pop > img) {
display: none;
}
::v-deep(.map-info-window) {
border: 1px solid #6dcff6;
min-width: 200px;
background: #0f2858;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
border-radius: 5px;
color: #000;
.title {
display: flex;
justify-content: space-between;
align-items: center;
color: white;
max-width: 600px;
padding: 8px 15px;
border-bottom: 1px solid #ccc;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.close {
height: 20px;
line-height: 20px;
font-size: 12px;
border: 1px solid #fff;
padding: 0 8px;
border-radius: 4px;
&:hover {
cursor: pointer;
color: #6dcff6;
border: 1px solid #6dcff6;
}
}
}
.content {
padding: 8px 15px;
font-size: 12px;
display: flex;
justify-content: space-around;
align-items: center;
height: 190px;
.cell_left {
width: 170px;
height: 100%;
margin: -2px 20px 0 4px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
overflow: hidden;
> img {
width: 155px;
height: 155px;
object-fit: cover;
}
}
.cell_right {
position: relative;
height: 100%;
> ul {
> li {
width: 200px;
padding: 3px 0;
font-size: 12px;
color: #fff;
> span {
color: #fff;
padding-right: 5px;
}
}
}
.btn-link {
position: absolute;
right: 0px;
bottom: 0px;
cursor: pointer;
display: flex;
justify-content: flex-end;
> button {
border: 1px solid #ccc;
font-size: 12px;
background: transparent;
color: #fff;
line-height: 12px;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
&:hover {
border: 1px solid #6dcff6;
color: #6dcff6;
}
}
}
}
}
}
</style>