【高德地圖API】從零開始學高德JS API（二）地圖控制項與外掛程式——測距、圓形編輯器、滑鼠工具、地圖類型切換、鷹眼魚骨

標籤：style   blog   class   code   java   tar   

摘要：無論是控制項還是外掛程式，都是在一級API介面的基礎上，進行二次開發，封裝的一系列更加便於開發人員使用，減少開發人員工作量的二級API介面。除了官方通用的魚骨、鷹眼控制項，還有大量官方開發的地圖外掛程式，類似Google的lib。當然本文還會介紹自訂外掛程式的使用。 

 -------------------------------------------------------------------------------------------------

第一部分 控制項

目前官方支援的控制項包含：縮放控制條-地圖工具條（ToolBar）、縮圖-鷹眼(OverView)、比例尺（Scale）。

之所以把這三個控制項放到一起講，是因為他們的操作幾乎一樣，使用plugin添加控制項，然後都有show和hide方法。

預覽圖：

1、  縮放控制條-地圖工具條（ToolBar） 

工具條有很多效果，比如隱藏尺規，隱藏方向鍵盤，甚至還有HTML5定位。

 

添加魚骨：

mapObj.plugin(["AMap.ToolBar"],function(){   //在地圖中添加ToolBar外掛程式              toolBar = new AMap.ToolBar();          mapObj.addControl(toolBar);           });  

 

移除魚骨：

toolBar.hide();

 

完整魚骨：

    toolBar.show();    toolBar.showRuler();    toolBar.showDirection();

 

只有方向盤：

    toolBar.show();    toolBar.showDirection();            toolBar.hideRuler();

 

只有長尺規：

    toolBar.show();    toolBar.hideDirection();    toolBar.showRuler();

 

只有短尺規：

    toolBar.show();    toolBar.hideRuler();    toolBar.hideDirection();

 

2、  縮圖-鷹眼(OverView) 

可以設定鷹眼是否開啟，是否顯示。顯示就是isOpen:true;

開啟如下左圖open()，關閉狀如下右圖close()。

mapObj.plugin(["AMap.OverView"],function(){  //在地圖中添加鷹眼外掛程式          //載入鷹眼          overView = new AMap.OverView({              visible:true //初始化顯示鷹眼          });          mapObj.addControl(overView);          overView.open(); //展開鷹眼    });   

 

3、  比例尺（Scale） 

mapObj.plugin(["AMap.Scale"],function(){    //載入比例尺外掛程式              scale = new AMap.Scale();          mapObj.addControl(scale);          scale.show();    });  

 

------------------------------------------------------------------------------------------------

第二部分：外掛程式

官方開發的外掛程式有：圓編輯外掛程式 (AMap.CircleEditor)、折線、多邊形編輯外掛程式 (AMap.PolyEditor)、滑鼠工具外掛程式 (AMap.MouseTool)、距離量測外掛程式 (AMap.RangingTool) 、地圖類型切換外掛程式 (AMap.MapType)。

1、  圓編輯外掛程式 (AMap.CircleEditor) 

添加圓形

circle = new AMap.Circle({   //圓形編輯器的樣式        map: mapObj,          center:new AMap.LngLat("116.40332221984863","39.90025505675715"),          radius:1000,          strokeColor: "#F33",          strokeOpacity: 1,          strokeWeight: 3,          fillColor: "ee2200",          fillOpacity: 0.35      });

 

開啟編輯器

mapObj.plugin(["AMap.CircleEditor"],function(){           circleEditor = new AMap.CircleEditor(mapObj,circle);   //建立圓形編輯器對象        circleEditor.open();    //開啟圓形編輯器    }); 

 

關閉編輯器

circleEditor.close();

 

移除圓形

circle.hide();

 

圓形編輯器：

 

2、  折線、多邊形編輯外掛程式 (AMap.PolyEditor)

 添加多邊形

var arr=new Array();//經緯度座標數組     arr.push(new AMap.LngLat("116.403322","39.920255"));     arr.push(new AMap.LngLat("116.410703","39.897555"));     arr.push(new AMap.LngLat("116.402292","39.892353"));     arr.push(new AMap.LngLat("116.389846","39.891365"));     polygon=new AMap.Polygon({        path:arr,    //設定多邊形輪廓的節點數組        strokeColor:"#0000ff",         strokeOpacity:0.2,         strokeWeight:3,         fillColor: "#f5deb3",        fillOpacity: 0.35     });     //地圖上添加多邊形    mapObj.addOverlays(polygon);

 

開啟多邊形編輯器

//構造多邊形編輯對象，並開啟多邊形的編輯狀態    mapObj.plugin(["AMap.PolyEditor"],function(){        polygonEditor = new AMap.PolyEditor(mapObj,polygon);         polygonEditor.open();     }); 

 

關閉多邊形編輯器，並移除多邊形

    polygonEditor.close();    polygon.hide();

 

多邊形編輯器：

 

3、  滑鼠工具外掛程式 (AMap.MouseTool)

滑鼠工具有9種，就不一一舉栗子了。

 

 

添加滑鼠工具

mapObj.plugin(["AMap.MouseTool"],function(){        //滑鼠工具外掛程式        mousetool = new AMap.MouseTool(mapObj);                 });

 

栗子1：滑鼠打點工具

mousetool.marker(); //使用滑鼠工具，在地圖上畫標記點

 

栗子2：滑鼠測距工具

mousetool.measureArea();

 

栗子3：滑鼠畫圓形

mousetool.circle();

 

 

栗子4：滑鼠畫矩形

mousetool.rectangle();

 

……

……

……

之後的都不一一舉例了，大家查一下類參考，直接換個類名就行。

 

關閉滑鼠工具

mousetool.close(true);

 

4、  距離量測外掛程式 (AMap.RangingTool)

 建立測距外掛程式，並且先隱藏。

    mapObj.plugin(["AMap.RangingTool"],function(){           ruler = new AMap.RangingTool(mapObj);           AMap.event.addListener(ruler,"end",function(e){              ruler.turnOff();           });              }); 

 

開啟並顯示測距工具

ruler.turnOn();

 

隱藏測距工具

ruler.turnOff();mapObj.clearMap();

 

預覽效果

 

5、  地圖類型切換外掛程式 (AMap.MapType) 

mapObj.plugin(["AMap.MapType"],function(){  //添加地圖類型切換外掛程式         //地圖類型切換          mapType= new AMap.MapType({defaultType:2,showRoad:true});          mapObj.addControl(mapType);      });

預覽

 ----------------------------------------------------------------------------------------------------------

第三部分：自訂外掛程式

首先定義一個命名空間

//定義一個外掛程式類 homeControlDiv，AMap為命名空間                  AMap.homeControlDiv=function(){                  } 

然後往裡面填充你的內容，包括功能、事件

AMap.homeControlDiv.prototype = {     addTo: function(map, dom){        dom.appendChild(this._getHtmlDom(map));     },       _getHtmlDom:function(map){                       this.map=map;                       // 建立一個能承載控制項的<div>容器                       var controlUI=document.createElement("DIV");                       controlUI.style.width=‘80px‘;     //設定控制項容器的寬度       controlUI.style.height=‘20px‘;    //設定控制項容器的高度                       controlUI.style.backgroundColor=‘white‘;                          controlUI.style.borderStyle=‘solid‘;                       controlUI.style.borderWidth=‘2px‘;                       controlUI.style.cursor=‘pointer‘;                       controlUI.style.textAlign=‘center‘;                                        // 設定控制項的位置                        controlUI.style.position=‘absolute‘;                       controlUI.style.left=‘120px‘;     //設定控制項離地圖的左邊界的位移量                       controlUI.style.top=‘5px‘;        //設定控制項離地圖上邊界的位移量                       controlUI.style.zIndex=‘300‘;     //設定控制項在地圖上顯示                                    // 設定控制項字型樣式                       controlUI.style.fontFamily=‘Arial,sens-serif‘;                       controlUI.style.fontSize=‘12px‘;                       controlUI.style.paddingLeft=‘4px‘;                       controlUI.style.paddingRight=‘4px‘;                       controlUI.innerHTML="返回中心";                                       // 設定控制項響應點擊onclick事件                       controlUI.onclick = function(){                          map.setCenter(new AMap.LngLat(116.404, 39.915));                       }                       return controlUI;                     }                  }   

最後將這個控制項添加到地圖上：

var homeControl=new AMap.homeControlDiv(mapObj); //建立自訂外掛程式對象  mapObj.addControl(homeControl);                  //地圖上添加外掛程式  

 隱藏這個自訂控制項：（直接對控制項整個div進行隱藏）

controlUI.style.display=‘none‘;

 

 ------------------------------------------------------------------------------------------------------

第四部分：效果展示

http://zhaoziang.com/amap/zero_2_1.html