重点注意：
注意：这里用的key值，是web端的，而非web服务的，注意注意！！！
<!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">
<style>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0px;
font-size: 13px;
}
#panel {
position: fixed;
background-color: white;
max-height: 90%;
overflow-y: auto;
top: 160px;
right: 10px;
width: 280px;
}
#panel .amap-call {
background-color: #009cf9;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
#panel .amap-lib-driving {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
overflow: hidden;
}
</style>
<title>位置经纬度 + 获取货车规划数据</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=注意这里的key是web端的而非web服务的&plugin=AMap.Driving,AMap.Autocomplete,AMap.PlaceSearch"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<!-- UI组件库 1.0 -->
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<div id="pickerBox">
<div class="info">
<div class="input-item">
<div class="input-item-prepend">
<span class="input-item-text" style="width:8rem;">请输入起点</span>
</div>
<input id='startPos' type="text">
</div>
</div>
<div class="info" style="top: 5rem;">
<div class="input-item">
<div class="input-item-prepend">
<span class="input-item-text" style="width:8rem;">请输入终点</span>
</div>
<input id='endPos' type="text">
</div>
</div>
<div class="info" style="top:9rem;width: 290px;">
<button onclick="showLine()">搜索</button>
<button onclick="showPoints()">显示所有的点</button>
</div>
</div>
<script type="text/javascript">
var map = new AMap.Map("container", {
center: [116.397428, 39.90923], //地图中心点
zoom: 14
});
var startPoint, endPoint, city = '北京';
function initSearch(id, type) {
var autoComplete = new AMap.Autocomplete({
city: city,
input: id
});
var placeSearch = new AMap.PlaceSearch({
map: map
})
AMap.event.addListener(autoComplete, 'select', function(e) {
//TODO 针对选中的poi实现自己的功能
console.log(e);
placeSearch.search(e.poi.name)
if(type === 'start') {
startPoint = [e.poi.location.lng, e.poi.location.lat]
} else if(type === 'end') {
endPoint = [e.poi.location.lng, e.poi.location.lat]
}
})
}
initSearch('startPos', 'start')
initSearch('endPos', 'end')
var lines = [];
var showLine = function() {
var driving = new AMap.Driving({
map: map,
panel: "panel"
})
var path = []
path.push(startPoint);
path.push(endPoint);
driving.search(startPoint, endPoint, function(status, result) {
if(status === 'complete') {
var routes = result.routes;
var points = []
console.log(routes)
routes.forEach(item => {
var steps = item.steps;
steps.forEach(st => {
points = points.concat(st.path);
})
})
lines = points;
// showPoints(lines)
} else {
log.error('获取货车规划数据失败：' + result)
}
console.log(lines);
})
}
//显示所有的线上的点
var showPoints = function() {
map.clearMap()
var markers = []; //province见Demo引用的JS文件
for(var i = 0; i < lines.length; i += 1){
var marker;
var icon = new AMap.Icon({
image: 'https://vdata.amap.com/icons/b18/1/2.png',
size: new AMap.Size(24, 24)
});
marker = new AMap.Marker({
icon: icon,
position: lines[i],
offset: new AMap.Pixel(-12, -12),
zIndex: 101,
title: JSON.stringify(lines[i]),
map: map
});
markers.push(marker);
}
console.log(JSON.stringify(lines));
map.setFitView();
}
</script>
</body>
</html>