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