<!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">
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<title>圖標點標記</title>
<style>
* {
margin: 0;
padding: 0;
}
html,body,#container{
height:100%;
width:100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您的key&plugin=AMap.Driving"></script>
<script>
var map = new AMap.Map('container', {
zoom: 12,
center: [116.4,39.92],
resizeEnable: true
});
var startIcon = new AMap.Icon({
// 圖標尺寸
size: new AMap.Size(25, 25),
// 圖標的取圖地址
image: 'tu.png',
// 圖標所用圖片大小
imageSize: new AMap.Size(25, 25),
});
/*
* 駕車策略
* AMap.DrivingPolicy.LEAST_TIME 最快捷模式
* AMap.DrivingPolicy.LEAST_FEE 最經濟模式
* AMap.DrivingPolicy.LEAST_DISTANCE 最短距離模式
* AMap.DrivingPolicy.REAL_TRAFFIC 考慮實時路況
*/
var drivingOption = {
policy: AMap.DrivingPolicy.LEAST_TIME, // 其它policy參數請參考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
ferry: 1, // 是否可以使用輪渡
map: map,
hideMarkers: false, // 設置隱藏路徑規劃的起始點圖標
autoFitView: true
}
// 構造路線導航類
var driving = new AMap.Driving(drivingOption)
// 根據起終點經緯度規劃駕車導航路線
driving.search(new AMap.LngLat(116.421002, 39.93123), new AMap.LngLat(116.402123, 39.91122), function(status, result) {
if (status === 'complete') {
console.log('繪製駕車路線完成')
} else {
console.log('獲取駕車數據失敗：' + result)
}
});
var capitals = [{
center: [116.42,39.93123],
}, {
center: [116.41,39.92132],
}, {
center: [116.40,39.91122],
}];
var facilities = [];
for (var i = 0; i < capitals.length; i++) {
var marker = new AMap.Marker({
position: new AMap.LngLat(capitals[i].center[0], capitals[i].center[1]),
offset: new AMap.Pixel(-10, -10),
icon: startIcon,
});
facilities.push(marker);
}
map.add(facilities);
</script>
</body>
</html>
效果圖：
以防自己以後能用到 先寫出來。