資訊專欄INFORMATION COLUMN
摘要：高德地圖入門三距離測量插件區(qū)別雖然鼠標工具插件也提供距離量測功能，但是距離量測插件，提供更為豐富的樣式設置功能。
高德地圖 Javascript API 入門（三） 距離測量插件 區(qū)別
雖然鼠標工具插件也提供距離量測功能，
但是距離量測插件，提供更為豐富的樣式設置功能。
JS
map.plugin(["AMap.RangingTool"],function () {
var rangingTool=new AMap.RangingTool(map);
rangingTool.turnOn(); // 開啟量測功能
});
預覽
樣式設置| RangingToolOptions | 類型 | 說明 |
|---|---|---|
startMarkerOptions |
Object |
設置量測起始點標記屬性對象，包括點標記樣式、大小等，參考 ??MarkerOptions ?列表 |
midMarkerOptions |
Object |
設置量測中間點標記屬性對象，包括點標記樣式、大小等，參考 ?MarkerOptions ?列表 |
endMarkerOptions |
Object |
設置量測結(jié)束點標記屬性對象，包括點標記樣式、大小等，參考 ?MarkerOptions ?列表 |
lineOptions |
Object |
設置距離量測線的屬性對象，包括線樣式、顏色等，參考 ?PolylineOptions 列表 |
tmpLineOptions |
Object |
設置距離量測過程中臨時量測線的屬性對象，包括線樣式、顏色等，參考 ?PolylineOptions ?列表 |
startLabelText |
String |
設置量測起始點標簽的文字內(nèi)容，默認為“起點” |
midLabelText |
String |
設置量測中間點處標簽的文字內(nèi)容，默認為當前量測結(jié)果值 |
endLabelText |
String |
設置量測結(jié)束點處標簽的文字內(nèi)容，默認為當前量測結(jié)果值 |
startLabelOffset |
Pixel? |
設置量測起始點標簽的偏移量。默認值：Pixel(-6, 6) |
midLabelOffset |
Pixel? |
設置量測中間點標簽的偏移量。默認值：Pixel(-6, 6) |
endLabelOffset |
Pixel? |
設置量測結(jié)束點標簽的偏移量。默認值：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();
});
預覽
小練習 繪制太原市區(qū)的大概范圍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
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81679.html
摘要：高德地圖入門一準備工作首先注冊個開發(fā)者賬號然后創(chuàng)建應用，獲取新建文件，在標簽中引入如下代碼把你的值填入即可您申請的值創(chuàng)建設置地圖容器地圖初始化創(chuàng)建地圖設置地圖參數(shù)可以通過以下設置也可通過對象的方法設置預覽個性化地圖改變地圖樣式目前支持五種地 高德地圖 Javascript API 入門（一） 準備工作 首先注冊個開發(fā)者賬號 showImg(https://segmentfault.co...
摘要：鼠標在地圖上拉框即可繪制相應的矩形。鼠標在地圖上單擊繪制量測區(qū)域，鼠標左鍵雙擊或右鍵單擊結(jié)束當前量測操作，并顯示本次量測結(jié)果。參數(shù)設為時，鼠標操作關(guān)閉的同時清除地圖上繪制的所有覆蓋物對象設為時，保留所繪制的覆蓋物對象。 高德地圖 Javascript API 入門（二） 鼠標工具插件 測量距離 JS map.plugin([AMap.MouseTool],function ()...
摘要：高德地圖入門七熱力圖插件簡單例子顯示地圖坐標點加載熱力圖插件預覽參數(shù)構(gòu)造函數(shù)說明構(gòu)造一個熱力圖插件對象，為要疊加熱力圖的地圖對象，屬性參考列表中的說明。 高德地圖 Javascript API 入門（七） 熱力圖插件 簡單例子 // 顯示地圖 var map=new AMap.Map(container,{ resizeEnable:true, center:[116....
摘要：高德地圖入門六出行規(guī)劃公交路徑公交換乘服務，提供起終點公交路線規(guī)劃服務，整合步行方式初始化加載公交線路插件實例化北京必須值，搭乘公交所在城市可選值，搜索結(jié)果的標注線路等均會自動添加到此地圖上可選值，顯示搜索列表的容器可選值，詳細信息駕駛策略 高德地圖 Javascript API 入門（六） 出行規(guī)劃 公交路徑 公交換乘服務，提供起、終點公交路線規(guī)劃服務，整合步行方式 初始化 // 加...
摘要：高德地圖入門四地圖覆蓋物覆蓋物類名說明是否插件點標記否覆蓋物點標記復雜點標記對象，對普通點標記的擴展否覆蓋物折線否覆蓋物多邊形否覆蓋物圓否圖片覆蓋物否地圖右鍵菜單否點標記預覽自定義點標記預覽多邊形預覽右鍵菜單添加右鍵菜單內(nèi)容項放大縮小添加 高德地圖 Javascript API 入門（四） 地圖覆蓋物 覆蓋物 類名 說明 是否插件 AMap.Marker 點標記 否 AM...
閱讀 2898·2021-09-22 15:20
閱讀 2968·2021-09-22 15:19
閱讀 3471·2021-09-22 15:15
閱讀 2406·2021-09-08 09:35
閱讀 2385·2019-08-30 15:44
閱讀 3015·2019-08-30 10:50
閱讀 3744·2019-08-29 16:25
閱讀 1596·2019-08-26 13:55
