阅读量:0
``
html，，，，，，，，，， var map = new BMap.Map("container");， var point = new BMap.Point(116.404, 39.915);， map.centerAndZoom(point, 15);， var marker = new BMap.Marker(point);， map.addOverlay(marker);，，，，``在网页开发中，HTML5的geolocation API允许开发者获取用户设备的地理位置信息，结合百度地图API，可以实现在地图上显示用户的当前位置，以下是一个详细的示例：
HTML代码部分：
<!DOCTYPE html> <html> <head> <meta charset="UTF8"> <title>HTML5 Geolocation with Baidu Map</title> <!引入百度地图JS库 > <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=YOUR_API_KEY"></script> <style> #mapContainer { width: 600px; height: 400px; border: 1px solid gray; margin: 0 auto; } </style> </head> <body> <h1>Current Location</h1> <div id="mapContainer"></div> <p id="status"></p> <script> // 检查浏览器是否支持地理定位 if (navigator.geolocation) { document.getElementById("status").innerHTML = "Geolocation is supported in your browser."; var map = new BMap.Map("mapContainer"); // 创建百度地图实例 var point = new BMap.Point(116.404, 39.915); // 默认中心点 map.centerAndZoom(point, 11); // 初始化地图 // 获取并显示当前位置 navigator.geolocation.getCurrentPosition(function(position) { if (position) { var currentLat = position.coords.latitude; var currentLng = position.coords.longitude; var currentPoint = new BMap.Point(currentLng, currentLat); map.centerAndZoom(currentPoint, 16); // 设置当前位置为中心点 var marker = new BMap.Marker(currentPoint); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 document.getElementById("status").innerHTML += "Current location marked on the map."; } else { document.getElementById("status").innerHTML += "Unable to retrieve your location."; } }); } else { document.getElementById("status").innerHTML = "Sorry, Your browser does not support geolocation."; } </script> </body> </html>解释与说明：
1、HTML结构：包含一个标题（<h1>），用于显示“Current Location”，以及一个地图容器（<div id="mapContainer">）。
2、CSS样式：为地图容器设置了固定的宽度和高度，并添加了边框以便于查看。
3、JavaScript部分：
引入百度地图JS库：通过<script>标签引入百度地图JS库，需要替换YOUR_API_KEY为你自己的百度地图API密钥。
检查浏览器支持性：使用navigator.geolocation检查浏览器是否支持地理定位。
创建地图实例：使用百度地图API创建一个地图实例，设置默认的中心点和缩放级别。
获取当前位置：使用navigator.geolocation.getCurrentPosition方法获取当前位置的经纬度，并在地图上标记出来，如果成功获取位置，将在页面中显示“Current location marked on the map.”；否则显示“Unable to retrieve your location.”。
4、错误处理：如果浏览器不支持地理定位功能，会显示“Sorry, Your browser does not support geolocation.”提示信息。
常见问题解答（FAQs）：
Q1: 为什么无法获取到位置？
A1: 可能的原因包括：浏览器不支持地理定位、用户未授予权限、网络问题等，确保在支持地理定位的浏览器中运行，并且已授予访问位置信息的权限。
Q2: 如何申请百度地图API密钥？
A2: 前往百度地图开放平台（https://lbsyun.baidu.com/）注册账号并创建应用，即可获得API密钥。
Q3: 是否可以自定义地图样式？
A3: 是的，可以通过百度地图提供的自定义样式功能来修改地图的颜色、标注样式等，具体可以参考百度地图官方文档。
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>百度地图定位示例</title> <!引入百度地图API > <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <!设置地图容器的高度 > <style> #mapContainer { width: 100%; height: 500px; } </style> </head> <body> <!地图容器 > <div id="mapContainer"></div> <script> // 创建地图实例 var map = new BMap.Map("mapContainer"); // 初始化地图，设置中心点坐标和地图级别 var point = new BMap.Point(116.404, 39.915); // 这里设置您要定位的坐标 map.centerAndZoom(point, 15); // 开启地图滚动放大 map.enableScrollWheelZoom(true); // 添加标注 var marker = new BMap.Marker(point); map.addOverlay(marker); // 添加信息窗口 var infoWindow = new BMap.InfoWindow("您现在的位置"); marker.openInfoWindow(infoWindow); </script> </body> </html>使用说明：
1、替换密钥：在<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>中的您的密钥替换为您从百度地图开放平台申请的API密钥。
2、坐标设置：在var point = new BMap.Point(116.404, 39.915);中设置您要定位的坐标。
3、地图容器高度：在<style>标签中可以调整#mapContainer的高度。
4、地图初始化：map.centerAndZoom(point, 15);中，point是地图中心点坐标，15是地图的缩放级别。
5、滚动放大：map.enableScrollWheelZoom(true);开启鼠标滚轮的缩放功能。
6、添加标注：var marker = new BMap.Marker(point);创建一个标注，map.addOverlay(marker);将其添加到地图上。
7、添加信息窗口：var infoWindow = new BMap.InfoWindow("您现在的位置");创建一个信息窗口，marker.openInfoWindow(infoWindow);将其与标注关联并显示。
