话不多说直接开干
1.第一种方式
百度地图地址 打开
https://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5
html结构
第二种
我们准备一个vue页面
然后html结构的元素
<template>
<div>
<div id="container"></div>
</div>
</template>
然后我们的js的逻辑部分
<script setup>
// 初始化script
function loadJScript() {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://api.map.baidu.com/getscript?v=3.0&ak=你的ak&services=&t=20230808155339';
script.onload = () => {
init()
}
document.body.appendChild(script);
}
// 初始化地图
function init(position = new BMap.Point(116.403963,39.915119)) {
const map = new window.BMap.Map('container'); // 创建Map实例
const point = position; // 创建点坐标
const points = [
new BMap.Point(116.402867,39.915541),
new BMap.Point(116.404807,39.915562),
new BMap.Point(116.404803,39.914864),
new BMap.Point(116.403882,39.91457),
new BMap.Point(116.402768,39.914701),
];
const polygonOptions = {
strokeColor: "red", // 边界线颜色
strokeWeight: 1, // 边界线宽度
strokeOpacity: 0.8, // 边界线透明度
fillColor: "blue", // 填充颜色
fillOpacity: 0.4 // 填充透明度
};
const poly = new BMap.Polygon(points, polygonOptions)
// 折线添加到地图中
map.addOverlay(poly)
map.centerAndZoom(point, 20);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
map.enableScrollWheelZoom(); // 启用滚轮放大缩小
}
window.onload = loadJScript(); // 异步加载地图
</script>