代码实现功能：
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>
完成
