直接上代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>詳情</title>
</head>
<body>
<div>
<div id="allmap" style="width: 100%;height: 100%;"></div>
</div>
<script src="xxx/jquery/js/jquery.js"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的KEY"></script>
<script type="text/javascript">
LoadBaiduMapScript();
function LoadBaiduMapScript() {
//console.log("初始化百度地圖腳本...");
const AK = "你的key";
const BMap_URL = "https://api.map.baidu.com/api?v=2.0&ak=" + AK + "&s=1&callback=onBMapCallback";
return new Promise((resolve, reject) => {
// 如果已加載直接返回
if(typeof BMap !== "undefined") {
resolve(BMap);
return true;
}
// 百度地圖異步加載回調處理
window.onBMapCallback = function() {
console.log("百度地圖腳本初始化成功...");
resolve(BMap);
};
// 插入script腳本
let scriptNode = document.createElement("script");
scriptNode.setAttribute("type", "text/javascript");
scriptNode.setAttribute("src", BMap_URL);
document.body.appendChild(scriptNode);
});
}
// 百度地圖API功能
var map = new BMap.Map("allmap"); // 創建Map實例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地圖,設置中心點座標和地圖級別
//添加地圖類型控件
map.addControl(new BMap.MapTypeControl({
mapTypes: [
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]
}));
map.setCurrentCity("北京"); // 設置地圖顯示的城市 此項是必須設置的
map.enableScrollWheelZoom(true);//鼠標滾輪縮放true開啓
var point=new BMap.Point(116.404,39.915);//label顯示的位置
var myLabel = new BMap.Label("<span class='my-maptip'>測試123456<br /> 測試<span>",//爲lable填寫內容
{
offset:new BMap.Size(-60,-60),//label的偏移量，爲了讓label的中心顯示在點上
position:point}
);//label的位置
myLabel.setTitle("我是文本標註label");
myLabel.setStyle({//給label設置樣式，任意的CSS都是可以的
"color":"red",//顏色
"fontSize":"14px",
"border":"0",
"height":"auto",
"width":"auto",
"textAlign":"center",
"lineHeight":"30px",
"background":"lightgray",
"cursor":"pointer"
});
map.addOverlay(myLabel);
map.addEventListener("zoomend", function () {
//這裏根據縮放顯示和隱藏文本
var currentZoom = this.getZoom();
$('span.my-maptip').parent()[currentZoom<=11?'hide':'show']();
$('span.my-maptip').parent().css("font-size",30-currentZoom);
});
</script>
</body>
</html>