百度地圖定時循環顯示覆蓋物的文本標籤，並從新定位中心點

時間 2020-07-13

標籤百度地圖定時循環顯示覆蓋物文本標籤從新定位中心點欄目系統網絡简体版

原文原文鏈接

<!DOCTYPE html>

<head>

<title>百度地圖測試</title>

<script

type="text/javascript"

src="http://api.map.baidu.com/api?v=3.0&ak=hQx6KAoIgb4RkY1hj6kdVIkp89HYvgeV"

></script>

</head>

body,

html,

#allmap {

width: 100%;

height: 100%;

overflow: hidden;

margin: 0;

font-family: "微軟雅黑";

}

</style>

<body>

</body>

</html>

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。