<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>百度地图测试</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script
type="text/javascript"
src="http://api.map.baidu.com/api?v=3.0&ak=hQx6KAoIgb4RkY1hj6kdVIkp89HYvgeV"
></script>
</head>
<style type="text/css">
body,
html,
#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
</style>
<body>
<div id="allmap"></div>
</body>
</html>
<script>
var mapMarker = [];
var timeInterval = null; //定时器
var map = new BMap.Map("allmap");
var center = new BMap.Point(116.404, 39.915);
map.centerAndZoom(center, 15);
map.enableScrollWheelZoom(true);
// 覆盖物数据
var markerData = [
{ x: 116.400244, y: 39.92556, name: "文本标注1" },
{ x: 116.411244, y: 39.92556, name: "文本标注2" },
{ x: 116.422244, y: 39.92556, name: "文本标注3" },
{ x: 116.433244, y: 39.92556, name: "文本标注4" },
{ x: 116.444244, y: 39.92556, name: "文本标注5" },
];
for (let i = 0; i < markerData.length; i++) {
var point = new BMap.Point(markerData[i].x, markerData[i].y);
// 覆盖物的文本标签
var label = new BMap.Label(`我是第${i}个文字标签`, {offset:new BMap.Size(20,-10)});
// 覆盖物样式设置
label.setStyle({display: ‘none‘});
addMarker(point, label);
};
timing();
// 编写自定义函数,创建标注
function addMarker(point,label){
var marker = new BMap.Marker(point);
// 储存所有地图覆盖物
mapMarker.push(marker);
map.addOverlay(marker);
// 覆盖物添加文本标签
marker.setLabel(label);
marker.addEventListener(‘mouseover‘, function(e) {
markerover(e, marker);
});
marker.addEventListener(‘mouseout‘, function(e) {
markerout(e, marker);
})
};
// marker滑进事件
function markerover(e, marker) {
// 隐藏所有文本标签
$(‘.BMapLabel‘).hide();
marker.getLabel().setStyle({display: ‘block‘});
clearInterval(timeInterval);
};
// marker滑出事件
function markerout(e, marker) {
marker.getLabel().setStyle({display: ‘none‘})
timing();
}
function timing() {
console.log(mapMarker);
var length = mapMarker.length;
var i = 0;
timeInterval = setInterval(function() {
mapMarker[i].getLabel().setStyle({display: ‘block‘});
// 重新设置中心点
map.setCenter(new BMap.Point(mapMarker[i].point.lng, mapMarker[i].point.lat));
var k = i === 0 ? length - 1 : i - 1;
mapMarker[k].getLabel().setStyle({display: ‘none‘});
i++;
if (i === length) {
i = 0;
}
}, 3000)
}
</script>
