首页html5定位并在百度地图上显示的示例

html5定位并在百度地图上显示的示例

时间: 2024-01-13 10:00:58 浏览: 177

html5可以使用geolocation API来获取用户的地理位置信息，并且可以通过百度地图API将获取到的地理位置信息在地图上显示出来的示例。首先，在html文件中，需要引入百度地图API的相关代码，并且添加一个用于显示地图的div元素。然后，在JavaScript中使用geolocation API来获取用户的地理位置信息，获取到经纬度后再调用百度地图API的相关方法，在地图上显示出用户的位置标记。具体代码示例如下： ```html <!DOCTYPE html> <html> <head> <title>HTML5定位和百度地图显示示例</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your_baidu_map_api_key"></script> </head> <body> <div id="map" style="width: 100%; height: 400px;"></div> <script> var map = new BMap.Map("map"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; var point = new BMap.Point(lon, lat); var marker = new BMap.Marker(point); map.addOverlay(marker); map.panTo(point); }); } else { alert("浏览器不支持地理位置信息获取"); } </script> </body> </html> ``` 在这个示例中，首先引入了百度地图API的js文件，并创建了一个用于显示地图的div元素。然后在JavaScript中使用geolocation API获取用户的地理位置信息，再利用百度地图API在地图上显示出用户的位置标记。当用户允许地理位置信息获取时，地图会自动定位到用户的位置，并显示在地图上。如果浏览器不支持地理位置信息获取，则会弹出提示信息。这样就实现了html5定位并在百度地图上显示的示例。

阅读全文