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