1. 程式人生 > >百度地圖呼叫筆記:javascript版本2

百度地圖呼叫筆記:javascript版本2

學完基礎的控制元件類的設定和操作,我覺得有必要對核心類進行一個歸類了,可以參考一下的核心類,其中對於Map核心類的某些操作我放到用到的時候在進行:
1.PanOptions類:panBy和panTo方法的可選引數,沒有建構函式,通過物件字面量形式表示。
作者:野老盟客
連結:https://www.imooc.com/article/4128
來源:慕課網

1.PanOptions類:panBy和panTo方法的可選引數,沒有建構函式,通過物件字面量形式表示   
 屬性:
    noAnimation:是否在平移過程中禁止動畫。(自1.2新增)(Boolean)

2.MapOptions:此類表示Map建構函式的可選引數。它沒有建構函式,但可通過物件字面量形式表示。

    屬性:
        1.minZoom:地圖允許展示的最小級別。(Number)
        2.maxZoom:地圖允許展示的最大級別。(Number)
        3.mapType:地圖型別,預設為BMAP_NORMAL_MAP。(MapType:參考地圖型別類,後面會介紹)
        4.enableHighResolution:是否啟用使用高解析度地圖。在iPhone4及其後續裝置上,可以通過開啟此選項獲取更高解析度的底圖,v1.2,v1.3版本預設不開啟,v1.4預設為開啟狀態。(Boolean)
        5.enableAutoResize:是否自動適應地圖容器變化,預設啟用。(Boolean)
        6.enableMapClick:是否開啟底圖可點功能,預設啟用。(Boolean)

3.Viewport:此類代表視野,不可例項化,通過物件字面量形式表示。(自 1.1 新增)

    屬性:
        center:視野中心點。(Point)
        zoom:視野級別。(Number)

4.ViewportOptions:此類作為map.getViewport與map.setViewport方法的可選引數,不可例項化。

    屬性:
        1.enableAnimation:是否啟用動畫效果移動地圖,預設為true。當調整後的級別與當前地圖級別一致時,將使用動畫效果移動地圖。(Boolean)
        2.margins:視野調整的預留邊距,例如:margins: [30, 20, 0, 20] 表示座標點會限制在上述區域內。(Array<Number>)
        3.zoomFactor:地圖級別的偏移量,您可以在方法得出的結果上增加一個偏移值。例如map.setViewport計算出地圖的級別為10,如果zoomFactor為-1,則最終的地圖級別為9。(Number)
        4.delay:改變地圖視野的延遲執行時間,單位毫秒,預設為200ms。此延時僅針對動畫效果有效。(Number)

5.APIVersion:此常量表示API版本號,通過字串進行描述。

    屬性:
        BMAP_API_VERSION:返回當前API版本。例如,1.2版本返回字串“1.2”。(String)

6.MapStyle:該類用於設定地圖樣式,使用物件字面量形式表示,不可例項化。

    屬性:
        features:設定地圖上展示的元素種類,支援point(興趣點)、road(道路)、water(河流)、land(陸地)、building(建築物)。(Array)
        style:設定地圖底圖樣式,目前支援normal(預設樣式),dark(深色樣式),light(淺色樣式)三種。(string)

7.Map類:百度地圖最核心的一個類,用來例項化一個地圖,之所以最後介紹這個,是因為前面基本上是配置資訊,只要介紹這個的時候把那寫配置資訊初始化進去就可以了,這裡我不會全部介紹完,因為到了別的類的時候我還是會繼續介紹的。

    構造方法:
        Map(container:String|HTMLElement[,opts:MapOptions]):在指定的容器內建立地圖例項,之後需要呼叫Map.centerAndZoom()方法對地圖進行初始化。未進行初始化的地圖將不能進行任何操作。
        注意,構造方法是百度地圖的一切開始,也就是上面寫到的
        var mp=new BMap.Map("傳入你剛才提供的容器的id");
        方法,只有構造完成一個函式以外,才能夠得到百度地圖的起點。

    配置方法:
        下面方法基本上是開關方法,或者對等方法,兩組一對
        enableDragging():啟用地圖拖拽,預設啟用。
        disableDragging():禁用地圖拖拽.

        enableScrollWheelZoom():啟用滾輪放大縮小,預設禁用。
        disableScrollWheelZoom():禁用滾輪放大縮小。

        enableDoubleClickZoom():啟用雙擊放大,預設啟用。
        disableDoubleClickZoom():禁用雙擊放大

        enableKeyboard():啟用鍵盤操作,預設禁用。鍵盤的上、下、左、右鍵可連續移動地圖。同時按下其中兩個鍵可使地圖進行對角移動。PgUp、PgDn、Home和End鍵會使地圖平移其1/2的大小。+、-鍵會使地圖放大或縮小一級。
        disableKeyboard():禁用鍵盤操作。

        enableInertialDragging():啟用地圖慣性拖拽,預設禁用。
        disableInertialDragging():禁用地圖慣性拖拽。

        enableContinuousZoom():啟用連續縮放效果,預設禁用。
        disableContinuousZoom():禁用連續縮放效果。

        enablePinchToZoom():啟用雙指操作縮放,預設啟用。
        disablePinchToZoom():禁用雙指操作縮放。

        enableAutoResize():啟用自動適應容器尺寸變化,預設啟用。
        disableAutoResize():禁用自動適應容器尺寸變化。

        下面配置資訊是存取方法,取得返回值是存的設定值
        setDefaultCursor(cursor:String):設定地圖預設的滑鼠指標樣式。引數cursor應符合CSS的cursor屬性規範。
        getDefaultCursor():返回地圖預設的滑鼠指標樣式。

        setDraggingCursor(cursor:String):設定拖拽地圖時的滑鼠指標樣式。引數cursor應符合CSS的cursor屬性規範。
        getDraggingCursor():返回拖拽地圖時的滑鼠指標樣式。

        下面是配置資訊是設定方法
        1.setMinZoom(zoom:Number):設定地圖允許的最小級別。取值不得小於地圖型別所允許的最小級別。
        2.setMaxZoom(zoom:Number):設定地圖允許的最大級別。取值不得大於地圖型別所允許的最大級別。
        3.setMapStyle(mapStyle:MapStyle):設定地圖樣式,樣式包括地圖底圖顏色和地圖要素是否展示兩部分。注意,該型別可以參考上面的MapStyle類
        4.setPanorama(pano:Panorama):將全景例項與Map類進行繫結。注意,該型別可以參考下面的全景類。
        5.disable3DBuilding():禁用地圖的3D樓塊展現功能。

    狀態方法:
        該方法一般具有返回值,請參考()裡面的返回值型別
        1.getBounds():返回地圖可視區域,以地理座標表示。(Bounds)返回值參考前面的基礎類
        2.getCenter():返回地圖當前中心點。(Point)返回值參考前面的基礎類
        3.getDistance(start:Point, end:Point)返回兩點之間的距離,單位是米。(Number)
        4.getMapType():返回地圖型別。(MapTypes)
        5.getSize():返回地圖檢視的大小,以畫素表示.(Size)
        6.getViewport(view: Array<Point>[, viewportOptions: ViewportOptions]):根據提供的地理區域或座標獲得最佳的地圖視野,返回的物件中包含center和zoom屬性,分別表示地圖的中心點和級別。此方法僅返回視野資訊,不會將新的中心點和級別做用到當前地圖上。(Viewport)
        7.getZoom():返回地圖當前縮放級別。(Number)
        8.getPanorama():獲取與Map類繫結的全景例項。(Panorama)

    修改地圖狀態方法:
        下面方法可以用來設定地圖狀態資訊,這樣可以動態設定。基本上沒有返回值。

        1.centerAndZoom(center:Point, zoom:Number):設初始化地圖。如果center型別為Point時,zoom必須賦值,範圍3-19級,若呼叫高清底圖(針對移動端開發)時,zoom可賦值範圍為3-18級。如果center型別為字串時,比如“北京”,zoom可以忽略,地圖將自動根據center適配最佳zoom級別。參考前面介紹的資訊。

        2.panTo(center:Point[, opts:PanOptions]):將地圖的中心點更改為給定的點。如果該點在當前的地圖檢視中已經可見,則會以平滑動畫的方式移動到中心點位置。可以通過配置強制移動過程不使用動畫效果。

        3.panBy(x:Number, y:Number[, opts: PanOptions]):將地圖在水平位置上移動x畫素,垂直位置上移動y畫素。如果指定的畫素大於可視區域範圍或者在配置中指定沒有動畫效果,則不執行滑動效果。

        4.reset():重新設定地圖,恢復地圖初始化時的中心點和級別。這個可以方便重新設定值。

        5.setCenter(center:Point|String):設定地圖中心點。center除了可以為座標點以外,還支援城市名。

        6.setCurrentCity(city:String):設定地圖城市,注意當地圖初始化時的型別設定為BMAP_PERSPECTIVE_MAP時,需要在呼叫centerAndZoom之前呼叫此方法設定地圖所在城市。
        例如:
        var map = new BMap.Map(“container”, {mapType: BMAP_PERSPECTIVE_MAP}); map.setCurrentCity(“北京市”); map.centerAndZoom(new BMap.Point(116.404, 39.915), 18); 注意:初始化的座標應與您設定的城市對應,否則地圖將無法正常顯示。如果地圖初始化為BMAP_NORMAL_MAP型別,則在呼叫setMapType切換地圖型別時也要呼叫此方法。

        7.setMapType(mapType:MapTypes):設定地圖型別。注意,當設定地圖型別為BMAP_PERSPECTIVE_MAP時,需要呼叫map.setCurrentCity方法設定城市。

        8.setViewport(view:Array<Point>|Viewport[, viewportOptions: ViewportOptions]):根據提供的地理區域或座標設定地圖視野,調整後的視野會保證包含提供的地理區域或座標。

        9.setZoom(zoom:Number):將檢視切換到指定的縮放等級,中心點座標不變。注意:當有資訊視窗在地圖上開啟時,地圖縮放將保證資訊視窗所在的座標位置不動。

        10.highResolutionEnabled():是否使用高解析度底圖。僅當mapOptions.enableHighResolution屬性為true且裝置支援高解析度時返回true。(Boolean)

        11.zoomIn():放大一級檢視。

        12.zoomOut():縮小一級檢視。

        13.addHotspot(hotspot:Hotspot):為地圖新增熱區。

        14.removeHotspot(hotspot:Hotspot):移除某個地圖熱區。

        15.clearHotspots():清空地圖所有熱區.

        以上方法還可以這樣利用,就是當你設定一個控制元件的時候就可以呼叫上面的方法進行設定了。

    下面的控制元件方法,右鍵選單方法,覆蓋物方法,地圖圖層方法可以參考每個類說明的最後一個說明,這裡就不說了,為了更好的分類運用。

    座標變換:
        此方法就是畫素點和成經緯度互相轉換的方法。返回值就是相對的值。
        pixelToPoint(pixel:Pixel):畫素座標轉換為經緯度座標
        pointToPixel(point:Point):經緯度座標轉換為畫素座標。

    事件:
        這個分類我覺得還是比較重要的,畢竟效果是通過事件去實現的,所以,這些方法還是需要詳細看看的:其中後面的括號為所要的引數。

        下面是滑鼠點選事件,如果做移動Webapp的話,最好使用後面的觸控事件。
        1.click:左鍵單擊地圖時觸發此事件。當雙擊時,產生的事件序列為: click click dblclick({type, target, point, pixel, overlay})
        2.dblclick:滑鼠雙擊地圖時會觸發此事件。({type, target, pixel, point})
        3.rightclick:右鍵單擊地圖時觸發此事件。當雙擊時,產生的事件序列為: rightclick rightclick rightdblclick ({type, target, point, pixel, overlay})
        4.rightdblclick:右鍵雙擊地圖時觸發此事件。({type, target, point, pixel, overlay})

        //web端移動事件
        5.maptypechange:地圖型別發生變化時觸發此事件。
        6.mousemove:滑鼠在地圖區域移動過程中觸發此事件。({type, target, point, pixel, overlay})
        7.mouseover:滑鼠移入地圖區域時觸發此事件。({type, target})
        8.mouseout:滑鼠移出地圖區域時觸發此事件。({type, target})
        9.movestart:地圖移動開始時觸發此事件。({type, target})
        10.moving:地圖移動過程中觸發此事件。({type, target})
        11.moveend:地圖移動結束時觸發此事件。({type, target})
        12.zoomstart:地圖更改縮放級別開始時觸發觸發此事件。({type, target})
        13.zoomend:地圖更改縮放級別結束時觸發觸發此事件。({type, target})

        //新增覆蓋物事件
        14.addoverlay:當使用Map.addOverlay()方法向地圖中新增單個覆蓋物時會觸發此事件。({type, target})

        //新增控制元件事件
        15.addcontrol:當使用Map.addControl()方法向地圖中新增單個控制元件時會觸發此事件。({type, target})
        16.removecontrol:當使用Map.removeControl()方法移除單個控制元件時會觸發此事件。({type, target})
        17.removeoverlay:當使用Map.removeOverlay()方法移除單個覆蓋物時會觸發此事件。({type, target})
        18.clearoverlays:當使用Map.clearOverlays()方法一次性移除全部覆蓋物時會觸發此事件({type, target})

        //拖拽事件
        19.dragstart:開始拖拽地圖時觸發。({type, target, pixel, point})
        20.dragging:拖拽地圖過程中觸發。({type, target, pixel, point})
        21.dragend:停止拖拽地圖時觸發。({type, target, pixel, point})

        //新增圖層事件
        22.addtilelayer:新增一個自定義地圖圖層時觸發此事件。({type, target})
        23.removetilelayer:移除一個自定義地圖圖層時觸發此事件。({type, target})

        下面是載入事件
        24.load:呼叫Map.centerAndZoom()方法時會觸發此事件。這表示位置、縮放層級已經確定,但可能還在載入地圖圖塊。({type, target, pixel, point, zoom})
        25.resize:地圖可視區域大小發生變化時會觸發此事件。({type, target, size})
        29.tilesloaded:當地圖所有圖塊完成載入時觸發此事件。({type, target})

        下面是熱區地圖的事件
        26.hotspotclick:點選熱區時觸發此事件。({type, target, size})
        27.hotspotover:滑鼠移至熱區時觸發此事件。({type, target, size})
        28.hotspotout:滑鼠移出熱區時觸發此事件({type, target, size})

        下面的是移動裝置的事件
        30.touchstart:觸控開始時觸發此事件,僅適用移動裝置({type, target, point,pixel})
        31.touchmove:觸控移動時觸發此事件,僅適用移動裝置。({type, target, point,pixel})
        32.touchend:觸控結束時觸發此事件,僅適用移動裝置。({type, target, point,pixel})
        33.longpress:長按事件,僅適用移動裝置。({type, target, point,pixel})

        有了事件,就需要說明事件的使用方法,其實百度地圖使用的方法是回撥機制,如下所示:
            Map.addEventListener("事件名稱",function(){回撥方法});
        當然,上面提到的括號後面的引數傳遞的方法傳遞到回撥函式裡面。


作者:野老盟客
連結:https://www.imooc.com/article/4128
來源:慕課網