H5使用百度地图SDK获取用户当前位置并且标记显示在地图

最新推荐文章于 2024-06-27 16:23:14 发布

a_靖

最新推荐文章于 2024-06-27 16:23:14 发布

阅读量3.9k

点赞数 1

分类专栏： Web前端 JS 文章标签：网页获取用户当前经纬度 H5获取当前经纬度 H5获取用户定位定位经纬度

本文链接：https://blog.csdn.net/qq_35713752/article/details/105296009

版权

Web前端同时被 2 个专栏收录

404 篇文章 25 订阅

订阅专栏

186 篇文章 4 订阅

订阅专栏

代码实现功能：

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>

完成