首頁技術文章正文

通過Geolocation API調用百度地圖

更新時間:2022年03月31日17時31分來源:傳智教育瀏覽次數:

前面介紹了Geolocation API的基本內容，Geolocation API更大的價值在于與GIS(地理信息系統(tǒng))的結合。要想實現與GIS的結合首先需要一個地圖的數據庫，百度地圖提供了地圖、導航、街景等豐富的地圖數據庫正好可以為我們所用。接下來通過一個案例demo3-7來演示如何調用百度2D地圖。

demo3-7.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
   <title>Geolocation</title>
   <style type="text/css">  
      html {
         height: 100%
      }

      body {
         height: 100%;
         margin: 0px;
         padding: 0px;
      }

      #container {
         height:100%
      }
   </style>
</head>
<body>
    <div id="container"></div>
    <!--引入百度javascript版API -->
    <script                   src="http://api.map.baidu.com/apiv=2.0&ak=0A5bc3c4fb543c8f9bc54b77bc155724"></script>
    <script>

       if(navigator.geolocation) {
           navigator.geolocation.getCurrentPosition(function (position) {

              var latitude = position.coords.latitude; // 緯度
              var longitude = position.coords.longitude; // 經度

              console.log(position);
              /********************/
              // container表示主到哪個容器
              var map = new BMap.Map("container"); 

              // 把經度緯度傳給百度
              var point = new BMap.Point(longitude, latitude);

              map.centerAndZoom(point, 15);

              /****************************/

              // 只寫上面三行就可出現地圖了，并且會定位

              // 定義好了一個圖片標記
              var myIcon =new BMap.Icon(
              "http://developer.baidu.com/map/jsdemo/img/fox.gif", 
              new BMap.Size(300, 157));

              // 創(chuàng)建標注
              var marker = new BMap.Marker(point, {icon: myIcon});
              map.addOverlay(marker);
          });
      }

    </script>
</body>
</html>

由于IE瀏覽器對百度API的支持情況較好，用IE瀏覽器訪問該頁面就會成功調用百度地圖，如圖3-14所示。

通過Geolocation API調用百度地圖

圖3-14調用百度地圖在demo3-7中，首先在第26行代碼中引入百度javaScript版API。30~33行代碼獲取當前位置坐標。41行代碼將坐標值傳給百度地圖。為了更明顯的顯示我們當前位置，在代碼50~52行定義一個標記，并在55~56行將標記定位在百度地圖的當前坐標上。需要注意的是，由于在實際開發(fā)中經度、緯度的值都會加密，所以圖3-14中顯示的位置可能與實際位置有偏差，不是錯誤。

調用完2D地圖后，接下來看一下百度的全景圖。為了大家可以在普通PC機上可以演示該功能，在調用全景圖這個案例中，使用固定經緯度來模擬獲取當前位置。

接下來通過一個案例demo3-8來演示如何使用GeolocationAPI來調用百度地圖的全景圖。

demo3-8.html

<!DOCTYPE html>
<html>
<head>
    <title>全景圖</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4qXTGvclMqTZXkLsU3twnMA7"></script>
    <style type="text/css">
        body, html{
             width: 100%;
             height: 100%;
             overflow: hidden;
             margin:0;
               font-family:"微軟雅黑";
             }
             #panorama {
                height: 100%;
                width: 100%;
                overflow: hidden;
             }

     </style>
</head>
<body>
<div id="panorama"></div>

<script type="text/javascript">

   var jd="116.349902";
   var wd="40.065817";
   //全景圖展示
   var panorama = new BMap.Panorama('panorama');
   panorama.setPosition(new BMap.Point(jd, wd)); //根據經緯度坐標展示全景圖
   panorama.setPov({heading: -40, pitch: 6});
  //全景圖位置改變后，普通地圖中心點也隨之改變
   panorama.addEventListener('position_changed', function(e){
      var pos = panorama.getPosition();
      map.setCenter(new BMap.Point(pos.lng, pos.lat));
      marker.setPosition(pos);
   });
   </script>
</body>
</html>

用Chrome瀏覽器打開demo3-8，效果如圖3-15所示。

圖3-15調用百度全景圖