高德地圖 Javascript API 入門（二）

dockerclub 發布于2019-08-20 14:29 / 2064人閱讀

摘要：鼠標在地圖上拉框即可繪制相應的矩形。鼠標在地圖上單擊繪制量測區域，鼠標左鍵雙擊或右鍵單擊結束當前量測操作，并顯示本次量測結果。參數設為時，鼠標操作關閉的同時清除地圖上繪制的所有覆蓋物對象設為時，保留所繪制的覆蓋物對象。

高德地圖 Javascript API 入門（二） 鼠標工具插件 測量距離

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

預覽

測量面積

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

預覽

繪制點標注

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

預覽

繪制折線

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

預覽

繪制多邊形

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

預覽

繪制矩形

    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
        });
    });

更多詳細參數參考 http://lbs.amap.com/api/javascript-api/reference/overlay#PolylineOptions

預覽

參考來源：http://lbs.amap.com/
作者：Yangfan

GPU云服務器云服務器高德地圖api接口高德地圖api接口文檔高德地圖高德地圖大數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81680.html

高德地圖 Javascript API 入門（一）

摘要：高德地圖入門一準備工作首先注冊個開發者賬號然后創建應用，獲取新建文件，在標簽中引入如下代碼把你的值填入即可您申請的值創建設置地圖容器地圖初始化創建地圖設置地圖參數可以通過以下設置也可通過對象的方法設置預覽個性化地圖改變地圖樣式目前支持五種地高德地圖 Javascript API 入門（一）準備工作首先注冊個開發者賬號 showImg(https://segmentfault.co...

jone5679 2019-08-20 14:29 評論0 收藏0
高德地圖 Javascript API 入門（七）

摘要：高德地圖入門七熱力圖插件簡單例子顯示地圖坐標點加載熱力圖插件預覽參數構造函數說明構造一個熱力圖插件對象，為要疊加熱力圖的地圖對象，屬性參考列表中的說明。高德地圖 Javascript API 入門（七）熱力圖插件簡單例子 // 顯示地圖 var map=new AMap.Map(container,{ resizeEnable:true, center:[116....

YuboonaZhang 2019-08-21 11:31 評論0 收藏0
高德地圖 Javascript API 入門（六）

摘要：高德地圖入門六出行規劃公交路徑公交換乘服務，提供起終點公交路線規劃服務，整合步行方式初始化加載公交線路插件實例化北京必須值，搭乘公交所在城市可選值，搜索結果的標注線路等均會自動添加到此地圖上可選值，顯示搜索列表的容器可選值，詳細信息駕駛策略高德地圖 Javascript API 入門（六）出行規劃公交路徑公交換乘服務，提供起、終點公交路線規劃服務，整合步行方式初始化 // 加...

idisfkj 2019-08-20 14:39 評論0 收藏0
高德地圖 Javascript API 入門（三）

摘要：高德地圖入門三距離測量插件區別雖然鼠標工具插件也提供距離量測功能，但是距離量測插件，提供更為豐富的樣式設置功能。高德地圖 Javascript API 入門（三）距離測量插件區別雖然鼠標工具插件也提供距離量測功能，但是距離量測插件，提供更為豐富的樣式設置功能。加載插件 JS map.plugin([AMap.RangingTool],function () { ...

EdwardUp 2019-08-20 14:29 評論0 收藏0
高德地圖 Javascript API 入門（四）

摘要：高德地圖入門四地圖覆蓋物覆蓋物類名說明是否插件點標記否覆蓋物點標記復雜點標記對象，對普通點標記的擴展否覆蓋物折線否覆蓋物多邊形否覆蓋物圓否圖片覆蓋物否地圖右鍵菜單否點標記預覽自定義點標記預覽多邊形預覽右鍵菜單添加右鍵菜單內容項放大縮小添加高德地圖 Javascript API 入門（四）地圖覆蓋物覆蓋物類名說明是否插件 AMap.Marker 點標記否 AM...

AlanKeene 2019-08-20 14:29 評論0 收藏0