高德地圖駕車導航使用
阿新 • • 發佈:2020-07-27
高德地圖駕車導航使用
傳入起點終點 返回路線長度,耗時,路線規劃
function (lon, lat) { var destination = [lon, lat]; var index = layer.msg("查詢中....", {time: 0, shade: 0.01}) $.ajax({ //起始位置, 結束位置,結果控制 速度優先 url: "https://restapi.amap.com/v3/direction/driving?key=你自己的key&origin=" + location + "&destination=" + destination + "&extensions=base&strategy=0", type: 'get', dataType: 'json', success: function (res) { layui.layer.close(index); //正常返回且唯一一條資料 if (res.status == "1" && res.info == "OK" && res.count == "1") { var steps = res.route.paths[0].steps; //線條 var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0, 0.8]), 2); var layer = map.getLayer("navigateLayer"); layer.setVisibility(true); //清空上次資料 layer.clear(); for (var i = 0; i < steps.length; i++) { var polylineArray = new Array(); //;切割字串位置 var array = steps[i].polyline.split(";"); for (var j = 0; j < array.length; j++) { //分割陣列 polylineArray.push(array[j].split(",")); } var polyline = new Polyline(polylineArray, wgs); var gra = new Graphic(polyline, lineSymbol, res.route); layer.add(gra); } var height = "32"; var width = "32"; var symbolImage = { // "url": ctx + "assets/images/map/waterQuantityStation1.png", "url": ctx + "assets/images/map/end.png", "width": width, "height": height, "angle": 0 }; var pointSymbol = new PictureMarkerSymbol(symbolImage); var endPoint = new Point(res.route.destination.split(",")[0], res.route.destination.split(",")[1]); var end = new Graphic(endPoint, pointSymbol, res.route.paths[0]); map.setZoom(10); layer.add(end); customInfoWindow.openInfoWindow(endPoint, end); } } }) }