代碼實現功能：
H5使用百度地圖SDK獲取用戶當前位置並且標記顯示在地圖，點擊該標記彈出一層自定義的HTML。
效果圖：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=GYg8CHIBgITKkneDe7K5ceepLNeMy5BG"></script> -->
<link rel="import" href="../tskedt/tskedt.html" id="tskedt" />
<style type="text/css">
body,
html,
#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微軟雅黑";
}
</style>
<title>設置點的新圖標</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var x,y;
function LoadBaiduMapScript() {
//console.log("初始化百度地圖腳本...");
const AK = "GYg8CHIBgITKkneDe7K5ceepLNeMy5BG";
const BMap_URL = "https://api.map.baidu.com/api?v=2.0&ak=" + AK + "&s=1&callback=onBMapCallback";
return new Promise((resolve, reject) => {
let scriptNode = document.createElement("script");
scriptNode.setAttribute("type", "text/javascript");
scriptNode.setAttribute("src", BMap_URL);
document.body.appendChild(scriptNode);
// 百度地圖異步加載回調處理
window.onBMapCallback = function() {
console.log("百度地圖腳本初始化成功...");
resolve(BMap);
};
});
}
LoadBaiduMapScript().then((BMapGL) => {
// 百度地圖API功能
var map = new BMapGL.Map("allmap");
var geolocation = new BMapGL.Geolocation();
geolocation.getCurrentPosition(function(r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
var mk = new BMapGL.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
// alert('您的位置：' + r.point.lng + ',' + r.point.lat);
x=r.point.lng;
y=r.point.lat;
var point = new BMapGL.Point(x, y);
map.centerAndZoom(point, 15);
// 創建小車圖標
var pt = new BMapGL.Point(x, y);
var myIcon = new BMapGL.Icon("./img/1.png", new BMapGL.Size(52, 52));
var myIcon2 = new BMapGL.Icon("./img/1.png", new BMapGL.Size(52, 52));
var marker = new BMapGL.Marker(pt, {
icon: myIcon
}); // 創建標註
var pt2 = new BMapGL.Point(point.x, point.y);
// var pt2 = new BMapGL.Point(116.404, 39.935);
console.log(point.x)
var marker2 = new BMapGL.Marker(pt2, {
icon: myIcon2
}); // 創建標註
// var marker = new BMapGL.Marker(point); // 創建標註
map.addOverlay(marker); // 將標註添加到地圖中
// map.addOverlay(marker2); // 將標註添加到地圖中
var opts = {
width: 300, // 信息窗口寬度
height: 340, // 信息窗口高度
title: "任務信息", // 信息窗口標題
}
var my_html = tskedt.import.body.innerHTML;
var infoWindow = new BMapGL.InfoWindow(my_html, opts); // 創建信息窗口對象
marker.addEventListener("click", function() {
map.openInfoWindow(infoWindow, point); //開啓信息窗口
});
} else {
alert('failed' + this.getStatus());
}
});
})
</script>
完成