示例地址:轨迹展示&巡航-轨迹展示-示例中心-JS API UI 组件示例 | 高德地图API
轨迹:获取经纬度会原道定位不准确问题,高德官网给了专门解决问题的方案:
轨迹纠偏-在地图上绘制-开发指南-Android 地图SDK | 高德地图API
1.封装方法,渲染地图
init() {
//首先,渲染地图实例
var that = this;
var map = new AMap.Map("map", {
zooms: [11, 16],
center: [120.17268, 30.353873],
features: ["bg", "road", "point"],
// mapStyle: "amap://styles/styles/57994c871bb604a4c79184f5f65d8782"
mapStyle: "amap://styles/423fbc9befa1b809f8edf1d2d79dca31"
// mapStyle: 'amap://styles/dbe75e10a35d68f7676a6f6299936152',
// layers: [
// new AMap.TileLayer.RoadNet()
// ]
});
window.map = map;
//引入高德地图轨迹组件库,页面地图加载调用此方法
AMapUI.load(["ui/misc/PathSimplifier"], function(PathSimplifier) {
if (!PathSimplifier.supportCanvas) {
alert("当前环境不支持 Canvas!");
return;
}
//启动页面
initPage(PathSimplifier);
});
function initPage(PathSimplifier) {
window.PathSimplifier = PathSimplifier;
//创建组件实例
window.pathSimplifierIns = new PathSimplifier({
zIndex: 100,
map: window.map, //所属的地图实例
autoSetFitView: false,
getPath: function(pathData, pathIndex) {
//返回轨迹数据中的节点坐标信息,[AMap.LngLat, AMap.LngLat...] 或者
[[lng|number,lat|number],...]
return pathData.path;
},
getHoverTitle: function(pathData, pathIndex, pointIndex) {
//返回鼠标悬停时显示的信息
if (pointIndex >= 0) {
//鼠标悬停在某个轨迹节点上
return (
pathData.name +
",点:" +
pointIndex +
"/" +
pathData.path.length
);
}
//鼠标悬停在节点之间的连线上
return pathData.name + ",点数量" + pathData.path.length;
},
renderOptions: {
// keyPointTolerance: 0,
// renderAllPointsIfNumberBelow: 15,
// keyPointStyle: {
// radius: 2, // 点的半径
// fillStyle: '#FF8C00', // 填充色,比如 red, rgb(255,0,0), rgba(0,0,0,1)等
// strokeStyle: '#eeeeee', // 描边色
// lineWidth: 1 // 描边宽度
// },
//轨迹线的样式
pathLineStyle: {
strokeStyle: "#F5BA45",
lineWidth: 6,
dirArrowStyle: true
}
// startPointStyle: {
// //起点
// radius: 4,
// fillStyle: "#109618",
// lineWidth: 8,
// strokeStyle: "#eeeeee"
// },
// endPointStyle: { } //终点
}
});
}
},