高德地图规划路线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width" />
<title>规划路线</title>
<style>
.box{ width:100%; height:100vh; display:block; overflow:hidden; }
#container {
width:100vw;
height: 100vh;
margin:0; padding:0;
display: block;
}
</style>
</head>
<body>
<div class="box">
<div id="container"></div>
</div>
</body>
</html>
导入高德地图js,配置地址要是
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "xxx",
};
</script>
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
AMapLoader.load({
key: "xxxx",
version: "2.0",
plugins: ["AMap.Driving",],
}).then((AMap) => {
const map = new AMap.Map("container",{
zoom:8,
center: [108.27331,22.78121],
});
const warehouse_point = new AMap.LngLat(108.30,22.75);
const marker_warehouse = new AMap.Marker({
icon:new AMap.Icon({
image: 'images/shdz.png',
size: new AMap.Size(60, 60),
imageSize: new AMap.Size(60,60)
}),
position:warehouse_point,
offset: new AMap.Pixel(-30, -60),
});
const start_point = new AMap.LngLat(108.81, 23.21);
const marker_start = new AMap.Marker({
icon:new AMap.Icon({
image: 'images/shdz.png',
size: new AMap.Size(60, 60),
imageSize: new AMap.Size(60,60)
}),
position:start_point,
offset: new AMap.Pixel(-30, -60),
});
AMap.plugin('AMap.Driving', function() {
var driving = new AMap.Driving({
policy: AMap.DrivingPolicy.LEAST_TIME,
map: map,
hideMarkers:true
})
var startLngLat = [108.30,22.75]
var endLngLat = [108.81, 23.21]
driving.search(startLngLat, endLngLat, function (status, result) {
})
})
const markerList = [marker_warehouse,marker_start, marker_end];
map.add(markerList);
})
.catch((e) => {
console.error(e);
});
</script>
