使用高德地图根据位置坐标画出路线图

原创 无尾熊 随笔 高德地图 302阅读 2018-01-11 09:14:13 举报

说明:发出开始和结束记录的信号,原生根据时间及移动距离双重判定记录坐标位置,停止记录后获取所有坐标点(当然开始结束这个也可以设置成自动记录)

下面说下前端这用高德api需要做的,哈哈哈其实不用做什么,把api的东西按照需要的块堆起来就行了

1)构造一个函数对象
var map = new AMap.Map('container', {
resizeEnable: true, //缩放
dragEnable: true, //拖拽
center:[116.412565, 39.808194], //中心点
zoom:13 //默认缩放比例
});

2)嗯嗯,接着就是把手机根据gps记录的坐标点(原生的做)取过来,这里遇到过一个问题:就是取到的坐标点无效,需要用高德提供的方法AMap.LngLat来构造一个地理坐标对象,lng代表经度 lat代表纬度

3)开始划线 使用AMap.Polyline构造折线对象
var polyline = new AMap.Polyline({
path: lineArr, //坐标点
strokeColor: '#109618', //路径颜色
strokeOpacity: 1, //透明度
strokeWeight: 6, //路径宽度
strokeStyle: 'solid', //
strokeDasharray: [10, 5], //style时使用 样式
isOutline: true, //外边界线
outlineColor: '#ccc', //外边界线颜色
geodesic: true, //是不是大地线
lineJoin: 'round' // 控制线的拐角是不是圆弧
});
polyline.setMap(map); //画线 setMap(map:Map)是设置显示图层的地图对象,就是想把什么显示出来

4)给特殊需要记录的点做出标记 AMap.Marker构造点标记对象,需要用一个循环
for(var i=0;i<lineArr.length;i+=1){ //lineArr 坐标点的数组
var position = lineArr[i];
var circleMarker = new AMap.Marker({
icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png";, //图标
position:position //位置
})
circleMarker.setMap(map)
circleMarker.setAnimation('AMAP_ANIMATION_DROP'); //设置了一下点出现的动画过渡
}
5)特殊标记需要给出个提示信息,就是点击标记的点出现提示信息,使用AMap.InfoWindow构造窗体信息,因为是多个点也是个循环
var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
for (var i = 0, marker; i < lineArr.length; i++) {
var marker = new AMap.Marker({
position: lineArr[i],
map: map
});
marker.content = '我是第' + (i + 1) + '个Marker'; //提示信息的内容
marker.on('click', markerClick);
marker.emit('click', {target: marker});
}
function markerClick(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}

这样就完成了,都是调用api里的东西~~~

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复