高德地图 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