高德地圖 Javascript API 入門（二）

時間 2019-11-07

原文原文鏈接

高德地圖 Javascript API 入門（二）

鼠標工具插件

測量距離

JSjavascript

map.plugin(["AMap.MouseTool"],function () {
        var mouseTool=new AMap.MouseTool(map);
        mouseTool.rule();
    });

預覽java

測量面積

JSapi

map.plugin(["AMap.MouseTool"],function () {
        var mouseTool=new AMap.MouseTool(map);
        mouseTool.measureArea();
    });

預覽工具

繪製點標註

JSspa

map.plugin(["AMap.MouseTool"],function () {
        var mouseTool=new AMap.MouseTool(map);
        mouseTool.marker();
    });

預覽插件

繪製折線

JS3d

map.plugin(["AMap.MouseTool"],function () {
        var mouseTool=new AMap.MouseTool(map);
        mouseTool.polyline();
    });

預覽code

繪製多邊形

JS對象

map.plugin(["AMap.MouseTool"],function () {
        var mouseTool=new AMap.MouseTool(map);
        mouseTool.polygon();
    });

預覽blog

繪製矩形

map.plugin(["AMap.MouseTool"],function () {
        var mouseTool=new AMap.MouseTool(map);
        mouseTool.rectangle();
    });

預覽

繪製圓

map.plugin(["AMap.MouseTool"],function () {
        var mouseTool=new AMap.MouseTool(map);
        mouseTool.circle();
    });

預覽

所有功能

方法	返回值	說明
`marker( options：MarkerOptions)`		開啓鼠標畫點標註模式。鼠標在地圖上單擊繪製點標註，標註樣式參考MarkerOptions設置
`polyline( options：PolylineOptions)`		開啓鼠標畫折線模式。鼠標在地圖上點擊繪製折線，鼠標左鍵雙擊或右鍵單擊結束繪製，折線樣式參考PolylineOptions設置
`polygon( options：PolygonOptions)`		開啓鼠標畫多邊形模式。鼠標在地圖上單擊開始繪製多邊形，鼠標左鍵雙擊或右鍵單擊結束當前多邊形的繪製，多邊形樣式參考PolygonOptions設置
`rectangle( options：PolygonOptions)`		開啓鼠標畫矩形模式。鼠標在地圖上拉框便可繪製相應的矩形。矩形樣式參考PolygonOptions設置
`circle( options：CircleOptions)`		開啓鼠標畫圓模式。鼠標在地圖上拖動繪製相應的圓形。圓形樣式參考CircleOptions設置
`rule( options：PolylineOptions)`		開啓距離量測模式。鼠標在地圖上單擊繪製量測節點，並計算顯示兩兩節點之間的距離，鼠標左鍵雙擊或右鍵單擊結束當前量測操做。量測線樣式參考 PolylineOptions 設置注：不能同時使用rule方法和RangTool插件進行距離量測
`measureArea( options：PolygonOptions)`		開啓面積量測模式。鼠標在地圖上單擊繪製量測區域，鼠標左鍵雙擊或右鍵單擊結束當前量測操做，並顯示本次量測結果。量測面樣式參考PolygonOptions設置
`rectZoomIn( options：PolygonOptions)`		開啓鼠標拉框放大模式。鼠標可在地圖上拉框放大地圖。矩形框樣式參考PolygonOptions設置
`rectZoomOut( options：PolygonOptions)`		開啓鼠標拉框縮小模式。鼠標可在地圖上拉框縮小地圖。矩形框樣式參考PolygonOptions設置
`close( Boolean)`		關閉當前鼠標操做。參數arg設爲true時，鼠標操做關閉的同時清除地圖上繪製的全部覆蓋物對象；設爲false時，保留所繪製的覆蓋物對象。默認爲false

#### 自定義覆蓋物樣式（以折線爲例 Polyline） JS

map.plugin(["AMap.MouseTool"],function () {
        var mouseTool=new AMap.MouseTool(map);
        mouseTool.polyline({
            strokeColor:"#f50", // 線條顏色，十六進制
            strokeOpacity:0.5, // 線條透明度
            strokeWeight:10, // 線條寬度
            strokeStyle:"dashed" // 線條樣式 solid || dashed
        });
    });

預覽