高德地圖 Javascript API 入門（三）

EdwardUp 發布于2019-08-20 14:29 / 1520人閱讀

摘要：高德地圖入門三距離測量插件區別雖然鼠標工具插件也提供距離量測功能，但是距離量測插件，提供更為豐富的樣式設置功能。

高德地圖 Javascript API 入門（三） 距離測量插件 區別

雖然鼠標工具插件也提供距離量測功能，
但是距離量測插件，提供更為豐富的樣式設置功能。

加載插件

    map.plugin(["AMap.RangingTool"],function () {
        var rangingTool=new AMap.RangingTool(map);
        rangingTool.turnOn(); // 開啟量測功能
    });

預覽

樣式設置

RangingToolOptions	類型	說明
`startMarkerOptions`	`Object`	設置量測起始點標記屬性對象，包括點標記樣式、大小等，參考 ??MarkerOptions ?列表
`midMarkerOptions`	`Object`	設置量測中間點標記屬性對象，包括點標記樣式、大小等，參考 ?MarkerOptions ?列表
`endMarkerOptions`	`Object`	設置量測結束點標記屬性對象，包括點標記樣式、大小等，參考 ?MarkerOptions ?列表
`lineOptions`	`Object`	設置距離量測線的屬性對象，包括線樣式、顏色等，參考 ?PolylineOptions 列表
`tmpLineOptions`	`Object`	設置距離量測過程中臨時量測線的屬性對象，包括線樣式、顏色等，參考 ?PolylineOptions ?列表
`startLabelText`	`String`	設置量測起始點標簽的文字內容，默認為“起點”
`midLabelText`	`String`	設置量測中間點處標簽的文字內容，默認為當前量測結果值
`endLabelText`	`String`	設置量測結束點處標簽的文字內容，默認為當前量測結果值
`startLabelOffset`	`Pixel?`	設置量測起始點標簽的偏移量。默認值：Pixel(-6, 6)
`midLabelOffset`	`Pixel?`	設置量測中間點標簽的偏移量。默認值：Pixel(-6, 6)
`endLabelOffset`	`Pixel?`	設置量測結束點標簽的偏移量。默認值：Pixel(-6, 6)

#### 示例改變標簽文字 JS

    map.plugin(["AMap.RangingTool"],function () {
        var rangingTool=new AMap.RangingTool(map,{
            startLabelText:"START",
            midLabelText:"MID",
            endLabelText:"END"
        });
        rangingTool.turnOn();
    });

預覽

改變線條樣式

    map.plugin(["AMap.RangingTool"],function () {
        var rangingTool=new AMap.RangingTool(map,{
            lineOptions:{
                strokeColor:"#ff3300",
                strokeStyle:"dashed",
                strokeWeight:10,
                strokeOpacity:0.5,
                isOutline:true,
                outlineColor:"#009933",
                showDir:true
            }
        });
        rangingTool.turnOn();
    });

預覽

小練習 繪制太原市區的大概范圍

    // 用坐標拾取器獲得坐標
    var lineArr=[
        [112.490931,37.898793],
        [112.553588,37.898793],
        [112.603026,37.899877],
        [112.605086,37.855028],
        [112.605601,37.831169],
        [112.610236,37.824661],
        [112.610236,37.798487],
        [112.602683,37.793739],
        [112.499171,37.793739],
        [112.495051,37.794553],
        [112.500544,37.830762],
        [112.500716,37.843099],
        [112.48973,37.847301],
        [112.489901,37.896897],
        [112.492476,37.8992]
    ];
    // 實例化一個Polyline類
    var polyline=new AMap.Polyline({
        path:lineArr,
        strokeColor:"#ff2200",
        strokeWeight:5
    });
    // 添加到地圖中
    polyline.setMap(map);

預覽

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

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

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

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

高德地圖 Javascript API 入門（一）

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

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

摘要：鼠標在地圖上拉框即可繪制相應的矩形。鼠標在地圖上單擊繪制量測區域，鼠標左鍵雙擊或右鍵單擊結束當前量測操作，并顯示本次量測結果。參數設為時，鼠標操作關閉的同時清除地圖上繪制的所有覆蓋物對象設為時，保留所繪制的覆蓋物對象。高德地圖 Javascript API 入門（二）鼠標工具插件測量距離 JS map.plugin([AMap.MouseTool],function ()...

dockerclub 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 入門（四）地圖覆蓋物覆蓋物類名說明是否插件 AMap.Marker 點標記否 AM...

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