2024年09月07日 建站教程
// 初始化地图
var map = new BMap.Map("map");
var point = new BMap.Point(116.404, 39.915); // 设置地图中心点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置缩放级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
// 创建多边形热区
var points = [
new BMap.Point(116.4035, 39.915), // 多边形顶点坐标
new BMap.Point(116.4132, 39.915),
new BMap.Point(116.4132, 39.925),
new BMap.Point(116.4035, 39.925)
];
var polygon = new BMap.Polygon(points, { strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.5, fillColor: "red", fillOpacity: 0.3 }); // 创建多边形热区
map.addOverlay(polygon); // 将多边形添加到地图上
// 注册点击事件
polygon.addEventListener("click", function (e) {
console.log("您点击了多边形热区");
});
// 创建圆形热区
var center = new BMap.Point(116.404, 39.915); // 圆心坐标
var radius = 500; // 半径，单位为米
var circle = new BMap.Circle(center, radius, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5, fillColor: "blue", fillOpacity: 0.3 }); // 创建圆形热区
map.addOverlay(circle); // 将圆形添加到地图上
// 注册点击事件
circle.addEventListener("click", function (e) {
console.log("您点击了圆形热区");
});
注意：在执行上面代码之前，先引入：http://api.map.baidu.com/api?v=2.0&ak=your_api_key
本文链接：http://so.lmcjl.com/news/12442/