<!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>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style>
html,body,#container{
height:100%;
}
.info{
width:26rem;
}
.amap-geolocation-con{
margin-bottom: 4.375rem;
}
</style>
<body>
<div id='container'></div>
</body>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=xxxxxxx[高德官网申请]&plugin=AMap.Driving"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script>
var linedata = [
{
'浙al': [
{
"addressName": "测试002",
"position":[
"113.899648",
"22.529287"
],
"createdAt": "2020-05-19 14:03:35.000"
},
{
"addressName": "深圳百度国际大厦",
"position":[
"116.379028",
"39.865042"
],
"createdAt": "2020-05-19 14:10:14.000",
}
]
},
{
'浙cl': [
{
"addressName": "测试002",
"position":[
"116.427281",
"39.903719"
],
"createdAt": "2020-05-19 14:03:35.000"
},
{
"addressName": "深圳百度国际大厦",
"position":[
"116.379028",
"39.885042"
],
"createdAt": "2020-05-19 14:10:14.000",
}
]
},
{
'浙dl': [
{
"addressName": "测试002",
"position":[
"120.04238","30.24516"
],
"createdAt": "2020-05-19 14:03:35.000"
},
{
"addressName": "深圳百度国际大厦",
"position":[
"120.14238","31.24516"
],
"createdAt": "2020-05-19 14:10:14.000",
}
]
}
]
const colors = ['#DC143C', '#5F9EA0', '#00BFFF', '#C71585', '#6495ED',
'#008B8B', '#FFFF00', '#FFD700', '#FFDEAD', '#FF4500',
'#FF8C00', '#8B4513', '#FFF5EE', '#FF7F50', '#FF6347'];
var truckDriving;
var obData = {};
var lineArr = [];//全部经纬度
for (var i = 0; i < linedata.length; i++) {
//console.log(linedata[i]);
var item = Object.keys(linedata[i])[0];
obData[item] = [];
for (var j = 0; j < linedata[i][item].length; j++) {
lineArr.push(
new AMap.LngLat(linedata[i][item][j].position[0], linedata[i][item][j].position[1])
);
obData[item].push(
new AMap.LngLat(linedata[i][item][j].position[0], linedata[i][item][j].position[1])
)
}
}
console.log(obData)
console.log(lineArr)
var startPoint = lineArr[0];
var endPoint = lineArr[lineArr.length - 1];
var waypoints = lineArr.concat();
waypoints.pop();
waypoints.shift();
var map = new AMap.Map("container", {
resizeEnable: true,
center: lineArr[0],
zoom: 13 //地图显示的缩放级别
});
var routeLine_obj ;
AMap.plugin("AMap.Driving", function () {
truckDriving = new AMap.Driving({
map: map,
});
// 根据起终点经纬度规划驾车导航路线
truckDriving.search(
startPoint,
endPoint,
{
waypoints: waypoints,
},
function (status, result) {
console.log(status);
console.log(result);
// result 即是对应的驾车导航信息,相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === "complete") {
alert("绘制驾车路线完成");
if (result.routes && result.routes.length) {
drawRoute(result.routes[0], "#FF6347");
}
} else {
alert("获取驾车数据失败:" + result);
console.log(result);
}
}
);
createMarker(waypoints, "途径");
createMarker(startPoint, "起点");
createMarker(endPoint, "终点");
Object.keys(obData).forEach((item,index) => {
var sPoint = obData[item][0];
var ePoint = obData[item][obData[item].length - 1];
var wpoints = obData[item].concat();
wpoints.pop();
wpoints.shift();
truckDriving.search(
sPoint,
ePoint,
{
waypoints: wpoints,
},
function (status, result) {
console.log(status);
console.log(result);
// result 即是对应的驾车导航信息,相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === "complete") {
console.log("绘制驾车路线完成");
if (result.routes && result.routes.length) {
drawRouteHed(result.routes[0], index);
}
} else {
console.log("获取驾车数据失败:" + result);
}
}
);
});
});
function drawRoute(route, color) {
var path = parseRouteToPath(route);
// 生成 折线路线
routeLine_obj = new AMap.Polyline({
zIndex: 51,
path: path,
isOutline: true,
outlineColor: "#ffeeee",
borderWeight: 1,
strokeWeight: 6,
strokeColor: color,
// strokeStyle: 'dashed',
// lineJoin: 'round'
});
routeLine_obj.setMap(map);
};
function parseRouteToPath(route) {
const path = [];
for (let i = 0, l = route.steps.length; i < l; i++) {
const step = route.steps[i];
for (let j = 0, n = step.path.length; j < n; j++) {
path.push(step.path[j]);
}
}
return path;
};
function createMarker(markArr, type) {
let iconUrl = "",
siteName = "";
if (type == "途径") {
// -------- 中途 站点-----------
markArr.forEach((item, index) => {
// 创建一个 Icon
const siteIcon = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(22, 34),
// 图标的取图地址
// image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
// image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
image:
"//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png",
// 图标所用图片大小
imageSize: new AMap.Size(22, 34),
// 图标取图偏移量
// imageOffset: new AMap.Pixel(0, 0)
});
const siteMarker = new AMap.Marker({
// text: lineName + '路线-' + (index + 1) + '号站点',
// icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-' + (index + 1) + '.png',
icon: siteIcon,
position: item,
offset: new AMap.Pixel(-10, -32),
map: map,
});
siteMarker.setMap(map);
});
} else if (type == "起点") {
iconUrl = "https://webapi.amap.com/theme/v1.3/markers/n/start.png";
siteName = "起点";
let oneMarker = new AMap.Marker({
icon: iconUrl,
position: markArr,
offset: new AMap.Pixel(-9, -32),
zIndex: 60,
map: map,
});
oneMarker.setMap(map);
} else {
iconUrl = "https://webapi.amap.com/theme/v1.3/markers/n/start.png";
siteName = "终点";
let endMarker = new AMap.Marker({
icon: iconUrl,
position: markArr,
offset: new AMap.Pixel(-9, -32),
zIndex: 60,
map: map,
});
endMarker.setMap(map);
}
};
function drawRouteHed(route, index) {
let path = this.parseRouteToPath(route);
// 生成 折线路线
routeLine_obj = new AMap.Polyline({
zIndex: 52,
path: path,
isOutline: true,
outlineColor: "#ffeeee",
borderWeight: 1,
strokeWeight: 6,
strokeColor: colors[index],
lineJoin: "round",
showDir: false,
});
routeLine_obj.setMap(map);
}
</script>
</html>
展示效果:
作者: 赖导--