我們有時候做開發會用到百度地圖上的一些藉口，來實現對應的功能顯示，鼠標移入移出顯示對應的信息，並可以自己定義顯示的內容，現在我們就來做一個百度地圖上自動義座標點計及詳細信息效果。
參考百度地圖Api地址：
http://lbsyun.baidu.com/jsdemo.htm#c1_11
最終效果
代碼如下：
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./index.css" disabled>
<title>百度地圖上自動義座標點計及詳細信息代碼</title>
<meta name="description" content="刮獎">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>CanvasLayer</title>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=pTeC0IZvnpLiWdXUgBzrSUQ0l0gQPcjS"></script>
<style>
body{margin: 0;}
#allmap{width:100%;height:600px;}
</style>
</head>
<body>
<div id="allmap"></div>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap");
// map.enableScrollWheelZoom(true); // 支持縮放
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); // 顯示地圖中心點
// 地圖數據
var pointData = [
{lng: 116.391692, lat: 39.919528, mapId: 1},
{lng: 116.404, lat: 39.915, mapId: 2},
{lng: 116.415551, lat: 39.912223, mapId: 3}
];
pointData.forEach((item, index) => {
// 引入地圖上的點
let myIcon = new BMap.Icon("./icon.jpg", new BMap.Size(50,50));
let currentPoint = new BMap.Point(item.lng, item.lat);
let marker = new BMap.Marker(currentPoint, {icon:myIcon}); // 創建標註
marker.mapId = item.mapId; // 添加id
marker.addEventListener("mouseover", showMsg);
marker.addEventListener("mouseout", hideMsg);
map.addOverlay(marker); //增加點
// 顯示鼠標移入後的信息
function showMsg(){
console.log('進去')
let p = this.getPosition(); //獲取marker的位置
console.log("marker的位置是" + p.lng + "," + p.lat);
console.log("marker == id" + this.mapId);
console.log(document.querySelector('#MAP' + this.mapId));
document.querySelector('#MAP' + this.mapId).style.display = 'block';
}
// 隱藏鼠標移入後的信息
function hideMsg(){
console.log(event)
var p = this.getPosition(); //獲取marker的位置
console.log("marker的位置是" + p.lng + "," + p.lat);
console.log("marker == id" + this.mapId);
console.log(document.querySelector('#MAP' + this.mapId));
document.querySelector('#MAP' + this.mapId).style.display = 'none';
}
createDiv();
// 創建地圖上對應點點的要顯示的內容信息
function createDiv() {
let pixel = map.pointToOverlayPixel(new BMap.Point(item.lng, item.lat)); // 獲取地圖上點的位置座標left, top
let div = document.createElement("div");
// 修改樣式
div.id = "MAP" + marker.mapId;
div.style.backgroundColor = "#EE5D5B";
div.style.display = "none";
div.style.border = "1px solid #BC3B3A";
div.style.position = "absolute";
div.style.height = "200px";
div.style.width = "200px";
div.style.fontSize = "20px";
div.style.wordWrap = "break-word";
div.style.left = pixel.x + 'px';
div.style.top = pixel.y + 'px';
div.innerHTML = JSON.stringify(item);
div.onmouseover = function(){
this.innerHTML = "百度地圖裏面的內容onmouseover" + JSON.stringify(item);
}
div.onmouseout = function(){
this.innerHTML = "百度地圖裏面的內容onmouseout" + JSON.stringify(item);
}
map.getPanes().labelPane.appendChild(div); // 將生成的div添加到百度地圖
map.addOverlay(div);
}
});
</script>
</body>
</html>