html,

body,

#container {

width: 100%;

height: 100%;

}

根據(jù)規(guī)劃數(shù)據(jù)繪制騎行路線

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

center: [116.397559, 39.89621],

zoom: 14

});

var ridingOption = {

policy: 1

}

var riding = new AMap.Riding(ridingOption)

//根據(jù)起終點坐標(biāo)規(guī)劃騎行路線

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

// result即是對應(yīng)的騎行路線數(shù)據(jù)信息，相關(guān)數(shù)據(jù)結(jié)構(gòu)文檔請參考 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('騎行路線數(shù)據(jù)查詢失敗' + 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);

// 調(diào)整視野達(dá)到最佳顯示區(qū)域

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

}

// 解析RidingRoute對象，構(gòu)造成AMap.Polyline的path參數(shù)需要的格式

// RidingResult對象結(jié)構(gòu)參考文檔 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

}

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。