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

酸奶小妹發表於2014-05-08
地圖APIJS控制元件型別

摘要：無論是控制元件還是外掛，都是在一級API介面的基礎上，進行二次開發，封裝的一系列更加便於開發者使用，減少開發者工作量的二級API介面。除了官方通用的魚骨、鷹眼控制元件，還有大量官方開發的地圖外掛，類似谷歌的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

相關文章