html,

body,

#container {

width: 100%;

height: 100%;

}

根據規劃數據繪制騎行路線

var map = new AMap.Map("container", {

center: [116.397559, 39.89621],

zoom: 14

});

var ridingOption = {

policy: 1

}

var riding = new AMap.Riding(ridingOption)

//根據起終點坐標規劃騎行路線

riding.search([116.397933,39.844818],[116.440655,39.878694], function(status, result) {

// result即是對應的騎行路線數據信息，相關數據結構文檔請參考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_RidingResult

if (status === 'complete') {

if (result.routes && result.routes.length) {

drawRoute(result.routes[0])

log.success('繪制騎行路線完成')

}

} else {

log.error('騎行路線數據查詢失敗' + result)

}

});

function drawRoute (route) {

var path = parseRouteToPath(route)

var startMarker = new AMap.Marker({

position: path[0],

icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',

anchor: 'bottom-center',

map: map

})

var endMarker = new AMap.Marker({

position: path[path.length - 1],

icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',

anchor: 'bottom-center',

map: map

})

var routeLine = new AMap.Polyline({

path: path,

isOutline: true,

outlineColor: '#ffeeee',

borderWeight: 2,

strokeWeight: 5,

strokeColor: '#0091ff',

strokeOpacity: 0.9,

lineJoin: 'round'

})

map.add(routeLine);

// 調整視野達到最佳顯示區域

map.setFitView([ startMarker, endMarker, routeLine ])

}

// 解析RidingRoute對象，構造成AMap.Polyline的path參數需要的格式

// RidingResult對象結構參考文檔 https://lbs.amap.com/api/javascript-api/reference/route-search#m_RideRoute

function parseRouteToPath(route) {

var path = []

for (var i = 0, l = route.rides.length; i < l; i++) {

var step = route.rides[i]

for (var j = 0, n = step.path.length; j < n; j++) {

path.push(step.path[j])

}

}

return path

}

總結

以上是生活随笔為你收集整理的PHP地图规划骑行路径,规划结果 + 骑行路线绘制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。