HTML5 调用百度地图API地理定位

  • <!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 Geolocation is supported in your browser, but location is currently not available.";
               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>


分享到:
读科技