参考：高德地图开放平台
效果图（显示起点和终点，并显示出其路径）：
准备工作：首先，要在高德地图上注册，获得一个 web端的 key值
然后在网页上引用它
<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.13&key=yourKey&plugin=AMap.TruckDriving'></script>第一步：加载高德地图
首先 准备好一个div容器
<div id="container" style="width: 100%; height: 520px;"></div>执行方法：
<script type="text/javascript">
//创建一个地图实例
self.map = new AMap.Map('container', {
resizeEnable: true,
//设定缩放的大小
zoom: 5,
//设定地图加载时的显示的中心位置
center: [经度,纬度],
//设置图标
icon: "img/mark_b.png"
});
</script>结果：
第二部：设定起点和终点
代码：
//设置终点位置
var addressinput = '福建省厦门大学';
// 创建一个 Icon 图标
var startIcon = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(25, 34),
// 图标的取图地址
image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
// 图标所用图片大小
imageSize: new AMap.Size(135, 40),
// 图标取图偏移量
imageOffset: new AMap.Pixel(-9, -3)
});
// 将 icon 传入 marker
var startMarker = new AMap.Marker({
//南方IT学院的经纬度
position: new AMap.LngLat(113.326404, 22.202239),
icon: startIcon,
offset: new AMap.Pixel(-13, -30)
});
// 将 markers 添加到地图
map.add([startMarker]);
var truckOptions = {
map: self.map,
policy: 0,
size: 1,
city: ''
};
var driving = new AMap.TruckDriving(truckOptions);
var path = [{//起点
keyword: '广东珠海南方IT学院',
city: ''
},
{ //终点
keyword: addressinput,
city: ''
}
];
var markers = [];
AMap.service('AMap.PlaceSearch', function() {
placeSearch = new AMap.PlaceSearch();
placeSearch.search(addressinput, function(status, result) {
if(status === 'complete' && result.info === 'OK') {
self.map.remove(markers); //查询前先移除所有标注
var poiArr = result.poiList.pois;
//在地图上创建标注点
var marker = new AMap.Marker({
//icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png"
icon: "img/dir-marker.png"
});
//获取位置
marker.setPosition(new AMap.LngLat(poiArr[0].location.lng, poiArr[0].location.lat));
marker.setMap(self.map);
//创建图标
marker.setLabel({
offset: new AMap.Pixel(3, 0), //修改label相对于maker的位置
});
markers.push(marker);
} else {
alert("获取位置失败");
}
});
});结果：
第三步：显示路线规划（因为我的团队项目是送货的，所以这里用的是货车路线规划）
代码：
driving.search(path, function(status, result) {
// result即是对应的货车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if(status === 'complete') {
log.success('绘制货车路线完成')
} else {
log.error('获取货车规划数据失败：' + result)
}
});结果：
到此这个案例就已经完成了。
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>高德地图test</title>
</head>
<body>
<div id="container" style="width: 100%; height: 520px;"></div>
<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.13&key=11cb2f8f130c98fe8a3df300703d90de&plugin=AMap.TruckDriving'></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript">
//创建一个地图实例
self.map = new AMap.Map('container', {
resizeEnable: true,
//设定缩放的大小
zoom: 5,
//设定地图加载时的显示的中心位置
center: [113.326404, 22.202253],
//设置icon图标
icon: "img/mark_b.png"
});
//设置终点位置
var addressinput = '福建省厦门大学';
// 创建一个 Icon 图标
var startIcon = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(25, 34),
// 图标的取图地址
image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
// 图标所用图片大小
imageSize: new AMap.Size(135, 40),
// 图标取图偏移量
imageOffset: new AMap.Pixel(-9, -3)
});
// 将 icon 传入 marker
var startMarker = new AMap.Marker({
//南方IT学院的经纬度
position: new AMap.LngLat(113.326404, 22.202239),
icon: startIcon,
offset: new AMap.Pixel(-13, -30)
});
// 将 markers 添加到地图
map.add([startMarker]);
var truckOptions = {
map: self.map,
policy: 0,
size: 1,
city: ''
};
var driving = new AMap.TruckDriving(truckOptions);
var path = [{//起点
keyword: '广东珠海南方IT学院',
city: ''
},
{ //终点
keyword: addressinput,
city: ''
}
];
var markers = [];
AMap.service('AMap.PlaceSearch', function() {
placeSearch = new AMap.PlaceSearch();
placeSearch.search(addressinput, function(status, result) {
if(status === 'complete' && result.info === 'OK') {
self.map.remove(markers); //查询前先移除所有标注
var poiArr = result.poiList.pois;
//在地图上创建标注点
var marker = new AMap.Marker({
//icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png"
icon: "img/dir-marker.png"
});
//获取位置
marker.setPosition(new AMap.LngLat(poiArr[0].location.lng, poiArr[0].location.lat));
marker.setMap(self.map);
//创建图标
marker.setLabel({
offset: new AMap.Pixel(3, 0), //修改label相对于maker的位置
});
markers.push(marker);
} else {
alert("获取位置失败");
}
});
});
driving.search(path, function(status, result) {
// result即是对应的货车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if(status === 'complete') {
log.success('绘制货车路线完成')
} else {
log.error('获取货车规划数据失败：' + result)
}
});
</script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
