百度地圖JavaScript API 學習之地址解析

風靈使發表於2019-04-06
地圖JavaScriptAPI

獲取地圖資料之地址解析

首先我們需要知道如何進行地址解析以及有哪些地址解析的方式。

其實，百度地圖API給我們提供了2種解析方式：地址解析和逆地址解析。

下面我們來認識一下它們。【官方的介紹地址請點這裡檢視】

簡介

  • 地址解析服務提供從地址轉換到經緯度的服務。
  • 逆地址解析則提供從經緯度座標轉換到地址的轉換功能。

具體如下圖所示：
在這裡插入圖片描述

單詞解釋

一說到地址解析，就涉及到了兩個重要的概念，那就是地理座標中的——經度和緯度。

我們先來認識一下這兩個單詞，因為程式碼中要用到，而且這兩個單詞也挺好記憶的：

  • 經度 longitude 英 [ˈlɒŋgɪtju:d]
  • 緯度 latitude 英 [ˈlætɪtju:d]

其次，我們還需要知道地理定位的這個單詞：

  • 地理定位 geolocation 英 [dʒɪɒləʊ'keɪʃn]

疑問：為什麼呢？

原因：地理定位（Geolocation）是HTML5 的重要特性之一，提供了確定使用者位置的功能。

HTML5 地理定位【詳情請看這裡】

所以，關於地理定位我們必須要知道：

  • HTML5 Geolocation API用於獲得使用者的地理位置。
  • 該API中使用 getCurrentPosition() 方法來獲得使用者的位置。

百度API提供的地址解析類【詳情見類參考】

Geocoder：地址解析 / 逆地址解析，用於座標與地址間的相互轉換。

核心類Geocoder的類參考如圖所示：
在這裡插入圖片描述由上圖可知：

Geocoder類有一個名為Geocoder()的建構函式，使用時將它例項化就行了。即new一個新的物件，就相當於建立了一個地址解析器的例項。程式碼：var myGeo = new BMap.Geocoder();
然後該建構函式存在兩個方法，根據方法名很容易能猜出方法的功能：

  • getPoint() 得到地理座標點，即經緯度資訊。【根據手動提供的地址資訊獲取】
  • getLocation() 得到當前使用者的具體地址資訊。【根據使用者當前的地理位置自動獲取】
  • 使用方法：
    • myGeo.getPoint(要解析的地址資訊,function(回撥函式的引數){},城市名);
    • myGeo.Locaiton(當前位置的地理座標點,function(回撥函式的引數){},options);
      注：options為可選引數，一般來說不用寫。

地址解析服務【先學習第一種】

地址解析服務，即根據地址描述獲得座標資訊。

下面我們來看看如何進行地址解析。百度地圖API都提供了哪些方法給我們呼叫呢？

（1）百度地圖API提供了Geocoder類進行地址解析；
（2）可以通過Geocoder.getPoint()方法來將一段地址描述轉換為一個座標。

分析：
（1）百度地圖已經為我們提供了地址解析的類，名為Geocoder。
（2）使用的時候，只需要通過它的建構函式Geocoder()進行例項化，即new一個物件，然後去呼叫它的getPoint()方法就實現了地址解析的功能了。

疑問：解析成功後的結果在哪裡返回呢？
答案：GeocoderResult類表示Geocoder的地址解析結果。它在地址解析的回撥函式的引數中返回，而且不可例項化。

  • 即Geocoder.getPoint()方法中的第二個引數callback，在回撥函式callback的引數中，GeocoderResult作為結果返回。
  • 換句話說就是，地址解析成功後，地址解析的結果，即GeocoderResult類，它會作為回撥函式的引數進行返回。而且返回的這個引數值是GeocoderResult類的屬性point，即座標點。這個引數point是百度地圖API規定好的。
  • 所以，回撥函式的引數最終返回的是一個Point型別的座標點。
//回撥函式
function(point){
    //裡面寫地址解析成功想做的事..
    console.log(point);
}

在這裡插入圖片描述
具體如何使用呢？（看程式碼）

如下示例，我們將地址“北京市海淀區上地10街10號”進行轉換來獲取該位置的地理經緯度座標，並在這個位置上新增一個標註。

注意：在呼叫Geocoder.getPoint()方法時，需要提供地址解析所在的城市（本例為“北京市”）。

var map = new BMap.Map("allmap");      
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
/*至此，百度地址初始化完成*/

// 建立地址解析器例項     
var myGeo = new BMap.Geocoder();      
// 將地址解析結果顯示在地圖上，並調整地圖視野    
myGeo.getPoint("北京市海淀區上地10街10號", function(point){//回撥函式      
    if (point) {      
        map.centerAndZoom(point, 16);      
        map.addOverlay(new BMap.Marker(point));      
    }      
 }, 
"北京市");

程式碼示例

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
    </style>
    <!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=3ecea51f560650b1ed8a4b99808f52e8"></script> --> 
	<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=3ecea51f560650b1ed8a4b99808f52e8&services=&t=20190123111209"></script>
	
    <title>地址解析</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地圖API功能
    var map = new BMap.Map("allmap");//建立一個map例項，allmap表示地圖容器
	map.disableDragging();//禁止拖拽
	
    var point = new BMap.Point(116.331398,39.897445);//建立點座標
    map.centerAndZoom(point,12);//初始化地圖，設定地圖的中心點座標和縮放級別

    // 建立地址解析器例項
    /* Geocoder類用於獲取使用者的地址解析。
    * 建構函式：Geocoder() 建立一個地址解析器的例項
    *方法：getPoint(address: String, callback: Function, city: String) 對指定的地址進行解析。
    *如果地址定位成功，則以地址所在的座標點Point為引數呼叫回撥函式。否則，回撥函式的引數為null。
    *city為地址所在的城市名，例如“北京市”。
    */
    var myGeo = new BMap.Geocoder(); // 建立地址解析器例項
    // 將地址解析結果顯示在地圖上,並調整地圖視野
    myGeo.getPoint("北京市海淀區上地10街", function(point){
        if (point) {
            map.centerAndZoom(point, 16);

            //以下程式碼向地圖中心點point新增了一個標註，並將該標註新增到地圖中
            // map.addOverlay(new BMap.Marker(point));

            //Marker：標註表示地圖上的點，可自定義標註的圖示。
			//marker的動畫效果：自定義圖片（動畫效果還可以將png格式的圖片換成gif的圖片）
			var markerImg= new BMap.Icon("timg.gif", new BMap.Size(50, 50));  //size 分別對應marker的 寬 和 高， 圖片應該設定成marker的大小
			  //marker = new BMap.Marker(point, { icon: markerImg});  // 建立標註
			  //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //彈跳效果（一直跳動）
			  //marker.setAnimation(BMAP_ANIMATION_DROP); //墜落效果（從頂部落下）

            var mark = new BMap.Marker(point);
			mark.setAnimation(BMAP_ANIMATION_BOUNCE); 
            //Overlay：覆蓋物的抽象基類，所有的覆蓋物均繼承此類的方法。
            map.addOverlay(mark);
        }else{
            alert("您選擇地址沒有解析到結果!");
        }
    }, "北京市");//注：該方法存在3個引數，最後一個引數“城市名”別忘了！
</script>

效果圖展示

在這裡插入圖片描述

相關文章