高德地圖 Javascript API 入門（三）

高德地圖 Javascript API 入門（三）

距離測量插件

區別

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

加載插件

JS

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

預覽

改變線條樣式

JS

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

預覽

小練習

繪製太原市區的大概範圍

JS

// 用座標拾取器得到座標
    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