html5与百度地图API结合使用。

来源：互联网发布：java程序开发培训编辑：程序博客网时间：2024/05/16 18:45
<!DOCTYPE html> <html> <title>HTML5 调用百度地图API地理定位实例 </title>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>   </head> <body style='margin:50px 10px;'>      <div id="status" style="text-align:center"></div>        <div style="width:600px;height:480px;border:1px solid gray;margin:30px auto" id="container"></div> </body> </html> <script type="text/javascript">  window.onload = function() {        if(navigator.geolocation) {             document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";           navigator.geolocation.getCurrentPosition(updateLocation);        }    };     function updateLocation(position) {        var latitude = position.coords.latitude;        var longitude = position.coords.longitude;        if(!latitude || !longitude) {           document.getElementById("status").innerHTML = "HTML5";            return;}var map = new BMap.Map("container");                     // 创建Map实例     var point = new BMap.Point(longitude, latitude);        // 创建点坐标        map.centerAndZoom(point, 15);                            // 初始化地图,设置中心点坐标和地图级别。        var marker = new BMap.Marker(point);                        // 创建标注        map.addOverlay(marker);                                    //将标注添加到地图中     };</script>