<!DOCTYPE html>
<html>
<head>
	<title>手机网页精准定位</title>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width, initial-scale=1.0'>
	<script src='https://api.map.baidu.com/api?v=2.0&ak=替换为你的百度ak'></script>
	<script>
		function getLocation() {
			if (navigator.geolocation) {
				navigator.geolocation.getCurrentPosition(showPosition);
			} else {
				alert('无法获取您的位置信息。');
			}
		}
<pre><code>	function showPosition(position) {
		var longitude = position.coords.longitude;
		var latitude = position.coords.latitude;
		var map = new BMap.Map('map-container');
		var point = new BMap.Point(longitude, latitude);
		map.centerAndZoom(point, 15);
		var marker = new BMap.Marker(point);
		map.addOverlay(marker);
		var address = '';
		var geoc = new BMap.Geocoder();
		geoc.getLocation(point, function(rs){
			var addComp = rs.addressComponents;
			address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
			var infoWindow = new BMap.InfoWindow('&lt;p&gt;您的位置:' + address + '&lt;/p&gt;');
			marker.addEventListener('click', function(){          
				this.openInfoWindow(infoWindow);
			});
			marker.openInfoWindow(infoWindow);
		});
	}
&lt;/script&gt;
</code></pre>
</head>
<body onload='getLocation()'>
	<div id='map-container' style='width: 100%; height: 300px;'></div>
</body>
</html>
手机网页精准定位实现:HTML & PHP 代码示例

原文地址: https://www.cveoy.top/t/topic/oYY1 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录