- 参考（www.cnblogs.com/tuboshu/p/1…
- 高德地图api（路径规划 2.0-基础 API 文档-开发指南-Web服务 API | 高德地图API (amap.com)）
- openlayers（OpenLayers - Welcome）
- openlayers示例（develop.smaryun.com:81/API/JS/OL5I…
Demo样例
- 新建map.html文件
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>高德路径规划demo</title>
<!-- <link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css"> -->
<!-- <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css"> -->
<style type="text/css"></style>
</head>
<body style="margin:0 0 0 0; padding:0 0 0 0;">
<div><a id="start" href="#">设置起点</a> <a id="end" href="#">设置终点</a> <a id="clear" href="#">清除路径</a></div>
<div id="map" style="width: 1000px;height:1000px"></div>
<script src="https://cdn.jsdelivr.net/npm/ol@v9.2.0/dist/ol.js"></script>
<!-- <script src="./static/jquery-3.2.1.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
var result = 0;
var start;
var end;
var name;
var projection = ol.proj.get("EPSG:4326");
function getNavmapLayer() {
return new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'//7,8
}),
projection: projection
});
}
var navlayer = getNavmapLayer();
var map = new ol.Map({
target: document.getElementById("map"),
layers: [
navlayer
],
view: new ol.View({
center: [115.46, 37.92],
projection: 'EPSG:4326',
zoom: 7
})
});
var menu_overlay = new ol.Overlay({
element: document.getElementById("contextmenu_container"),
positioning: 'center-center'
});
menu_overlay.setMap(map);
//矢量图层数据源
sourceVector = new ol.source.Vector();
//矢量图层
var vector = new ol.layer.Vector({
source: sourceVector,
style: function (feature) {
var status = feature.get("status");
var _color = "#8f8f8f";
if (status === "拥堵") _color = "#e20000";
else if (status === "缓行") _color = "#ff7324";
else if (status === "畅通") _color = "#00b514";
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: _color,
width: 5,
lineDash:[10, 8]
}),
})
}
});
map.addLayer(vector);
//菜单栏点击事件
$("#start").click(function () {
result = 1;
});
$("#end").click(function () {
result = 2;
});
$("#clear").click(function () {
result = 0;
start = "";
end = "";
name = "";
sourceVector.clear();
});
//地图点击事件
map.on("click", function (evt) {
//获取坐标
var coordate = evt.coordinate;
console.log(evt.coordinate);
console.log(coordate);
//如果result为0，返回不做任何操作
if (result == 0) {
return;
}
else {
if (result == 1) {
//起点
//构造提交api起点坐标
start = GetCoordate(coordate);
console.log("起点" + start);
name = "起点";
//矢量元素
var featureStart = new ol.Feature({
geometry: new ol.geom.Point(coordate),
name: '起点',//自定义属性
});
featureStart.setStyle(createFeatureStyle(featureStart,name));
sourceVector.addFeature(featureStart);
}
else {
//终点
//构造提交api终点坐标
name = "终点";
end = GetCoordate(coordate);
console.log("终点" + end);
//矢量元素
var featureEnd = new ol.Feature({
geometry: new ol.geom.Point(coordate),
name: '终点',//自定义属性
});
featureEnd.setStyle(createFeatureStyle(featureEnd,name));
sourceVector.addFeature(featureEnd);
////请求数据
getRouteResult(start, end);
}
}
});
//获取路径规划
function getRouteResult(start, end) {
var data = {
key: "",//申请的key值
origin: start,//起点
destination: end,//终点
extensions:"all"
};
$.ajax({
url: "https://restapi.amap.com/v3/direction/driving?",
type: "post",
dataType: "jsonp",
data: data,
success: function (result) {
console.log(result);
var routes = result["route"]["paths"][0];
console.log(routes);
//console.log(routes);
var steps = routes["steps"];
//console.log(steps);
for (var i = 0; i < steps.length; i++) {
var route = steps[i];
var path = route["tmcs"];
for (var k = 0; k < path.length; k++) {
var routePath = path[k];
var distance = routePath["distance"];
var polyline = routePath["polyline"].toString().split(";");
var status = routePath["status"];
var polylineData = [];
for (var j = 0; j < polyline.length; j++) {
//将字符串拆成数组
var realData = polyline[j].split(",");
var coordinate = [realData[0], realData[1]];
polylineData.push(coordinate);
//要素属性
}
var attribute = {
distance: distance,
};
//线此处注意一定要是坐标数组
var plygon = new ol.geom.LineString(polylineData);
//线要素类
var feature = new ol.Feature({
geometry: plygon,
attr: attribute,
status: status
});
sourceVector.addFeature(feature);
}
}
}
});
};
//保存小数点后六位
function GetCoordate(coordate) {
var lng = coordate[0].toString();
var lat = coordate[1].toString();
var lngIndex = lng.indexOf(".") + 7;
var latIndex = lat.indexOf(".") + 7;
lng = lng.substring(0, lngIndex);
lat = lat.substring(0, latIndex);
var str = lng + "," + lat;
console.log(str.toString());
return str;
}
//样式函数
var createFeatureStyle = function (feature, name) {
var url;
if (name==null) {
url = "https://pic.616pic.com/ys_img/00/13/15/8ECQqFB3cV.jpg";
}
else {
if (name=="起点") {
url = "https://pic.616pic.com/ys_img/00/13/15/8ECQqFB3cV.jpg";
}
else {
url = "https://bpic.588ku.com/element_pic/00/16/10/22580b15f5ca95d.jpg";
}
}
return new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */({
anchor: [0.5, 60],
anchorOrigin: 'top-right',
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
offsetOrigin: 'top-right',
offset: [0, 10],//偏移量设置
scale: 0.2, //图标缩放比例
opacity: 0.75, //透明度
src: url, //图标的url
})),
});
}
$(map.getViewport()).on("contextmenu", function (e) {
e.preventDefault();
var coordinate = map.getEventCoordinate(e);
menu_overlay.setPosition(coordinate);
});
$(map.getViewport()).on("click", function (e) {
e.preventDefault();
menu_overlay.setPosition(undefined);
});
</script>
</body>
</html>
- 双击打开map.html即可实现一个简单的map路径规划功能
踩坑点：高德地图需要注册秘钥才能使用
2. 点击【控制台】-【应用管理】-【我的应用】-【创建新应用】申请秘钥
3. 申请到秘钥后，将秘钥填入html文件中
