高德地图API简单使用
Posted Narule
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了高德地图API简单使用相关的知识，希望对你有一定的参考价值。
高德地图使用
api地址
https://lbs.amap.com/api/javascript-api/summary
高德地图有提供公共接口，查看api，能实现一些项目基本需求效果
基本使用
注册帐号
使用高德api，首先需要注册帐号，并且申请key(以个人或者公司的名字)，获取key后才能使用高德地图API去使用开发地图相关功能
高德地图使用，省图显示，路线规划，行车轨迹
<!DOCTYPE html>
<html lang="en">
<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"/>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<title>车辆配送行程监控</title>
</head>
<body>
<div style="width: 800px;height: 800px; position: absolute; top: 50%; left: 50%;transform: translate(-50%, -50%);">
<div id="container"></div>
<div class="input-card">
<h4>选择省份</h4>
<select name="code-list" id="adcode-list" style="height: 28px;margin-right: 10px;" onchange="changeAdcode(this.value)">
<option value="-1">选择省份</option>
</select>
<h4>选择层级</h4>
<select name="code-list" style="height: 28px;margin-right: 10px;" onchange="changeDepth(this.value)">
<option value="0">0 - 显示省级</option>
<option selected value="1">1 - 显示市级</option>
<option value="2">2 - 显示区/县级</option>
</select>
</div>
</div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key&plugin=Map3D,AMap.DistrictLayer,AMap.Scale,AMap.ToolBar,AMap.TruckDriving"></script>
<script src="https://a.amap.com/Loca/static/mock/adcodes.js"></script>
<script src="./js/monitor_map.js"></script>
<script>
</script>
<script>
// 构造下拉框
var optArr = adcodes.map(function (item) {
if (item.adcode == 100000) {
item.name = ‘选择省份‘;
}
if(item.adcode == 440000 || item.adcode == 450000 || item.adcode == 530000 || item.adcode == 520000 || item.adcode == 460000) {
return ‘<option ‘ + (item.adcode == adCode ? ‘selected‘ : ‘‘) + ‘ value="‘ + item.adcode + ‘">‘ + item.name + ‘</option>‘;
}
//item.adCode == 360000 ||江西
});
document.getElementById(‘adcode-list‘).innerHTML = optArr.join(‘‘);
</script>
</body>
</html>
monitor_map.js
内容：自定义地图js API使用示例
//首先或一个地图（对象）
var adCode = 440000;
var depth = 1;
var map = new AMap.Map("container", {
resizeEnable: true,
zoom: 7,
center: [113.23333, 23.26667],
pitch: 0,
viewMode: ‘3D‘,
});
// 创建省份图层
var disProvince;
function initPro(code, dep) {
dep = typeof dep == ‘undefined‘ ? 2 : dep;
adCode = code;
depth = dep;
disProvince && disProvince.setMap(null);
disProvince = new AMap.DistrictLayer.Province({
zIndex: 12,
adcode: [code],
depth: dep,
styles: {
‘fill‘: function (properties) {
// properties为可用于做样式映射的字段，包含
// NAME_CHN:中文名称
// adcode_pro
// adcode_cit
// adcode
var adcode = properties.adcode;
return getColorByAdcode(adcode);
},
‘province-stroke‘: ‘cornflowerblue‘,
‘city-stroke‘: ‘white‘, // 中国地级市边界
‘county-stroke‘: ‘rgba(255,255,255,0.5)‘ // 中国区县边界
}
});
disProvince.setMap(map);
}
// 颜色辅助方法
var colors = {};
var getColorByAdcode = function (adcode) {
if (!colors[adcode]) {
var gb = Math.random() * 155 + 50;
colors[adcode] = ‘rgba(‘ + gb + ‘,‘ + gb + ‘,255,0.45)‘;
}
return colors[adcode];
};
// 五省中心经纬度
var centerMapLng = new Map();
var centerMapLat = new Map();
//lng; //经度
//lat; //纬度
centerMapLng.set("530000",102.72);
centerMapLat.set("530000",25.05);
centerMapLng.set("440000",113.23333);
centerMapLat.set("440000",23.26667);
centerMapLng.set("520000",106.63);
centerMapLat.set("520000",26.65);
centerMapLng.set("450000",108.22);
centerMapLat.set("450000",22.48);
centerMapLng.set("460000",110.32);
centerMapLat.set("460000",20.03);
// 按钮事件
function changeAdcode(code) {
if (code != 100000) {
initPro(code, depth);
setCenter(code);
}
}
function setCenter(code){
var lng = centerMapLng.get(code);
var lat = centerMapLat.get(code)
map.setCenter([lng,lat]);
}
function changeDepth(dep) {
initPro(adCode, dep);
}
initPro(adCode, depth);
//设置地图显示范围
var mybounds = new AMap.Bounds([73, 4], [135,53]); // 设置经纬度边界 [西南经纬度,东北经纬度]
//map.setBounds(mybounds); //会将地图放大
map.setLimitBounds(mybounds);
// 路线规划，需要有起点和重点经纬度
//起点latitude: "23.167439" longitude: "113.46625"
//latitude: "23.00637" longitude: "113.124749" 终点 佛山医院
var truckDriving = new AMap.TruckDriving({
policy: 0, // 规划策略
size: 1, // 车型大小
width: 2.5, // 宽度
height: 2, // 高度
load: 1, // 载重
weight: 12, // 自重
axlesNum: 2, // 轴数
province: ‘京‘, // 车辆牌照省份
})
var path = []
path.push({lnglat:[113.46625, 23.167439]});//起点
//path.push({lnglat:[113.324749, 23.107439]});//途径
path.push({lnglat:[113.124749, 23.00637]});//终点
truckDriving.search(path, function(status, result) {
// result即是对应的货车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === ‘complete‘) {
//log.success(‘绘制货车路线完成‘)
if (result.routes && result.routes.length) {
drawRoute(result.routes[0])
}
} else {
//log.error(‘获取货车规划数据失败：‘ + result)
}
})
// 画路线
function drawRoute (route) {
var path = parseRouteToPath(route)
var startMarker = new AMap.Marker({
position: path[0],
icon: ‘https://webapi.amap.com/theme/v1.3/markers/n/start.png‘,
map: map,
anchor: ‘bottom-center‘,
})
var endMarker = new AMap.Marker({
position: path[path.length - 1],
icon: ‘https://webapi.amap.com/theme/v1.3/markers/n/end.png‘,
map: map,
anchor: ‘bottom-center‘,
})
var routeLine = new AMap.Polyline({
path: path,
isOutline: true,
outlineColor: ‘#ffeeee‘,
borderWeight: 2,
strokeWeight: 5,
strokeOpacity: 0.9,
strokeColor: ‘#0091ff‘,
lineJoin: ‘round‘
})
map.add(routeLine);
// 调整视野达到最佳显示区域
map.setFitView([ startMarker, endMarker, routeLine ])
//
drawPath();
map.setZoom(8);
}
// 解析DrivingRoute对象，构造成AMap.Polyline的path参数需要的格式
// DrivingResult对象结构参考文档 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DriveRoute
function parseRouteToPath(route) {
var path = []
for (var i = 0, l = route.steps.length; i < l; i++) {
var step = route.steps[i]
for (var j = 0, n = step.path.length; j < n; j++) {
path.push(step.path[j])
}
}
return path
}
// 路线规划好后，画出已行驶路线
//轨迹演示
/*;
113.466393,23.16349;113.466124,23.163199;113.466024,23.163116;113.465586,23.162886;113.465469,23.162873;113.465334,23.162869;113.464753,23.162865;113.464288,23.162878;113.463902,23.162912;113.462956,23.163025;113.461311,23.16322;113.460981,23.16326;113.460326,23.163342;113.460104,23.163368;113.458754,23.163628;113.457943,23.163759;113.457465,23.163811;113.457331,23.163828;113.456879,23.163889;113.456059,23.163984
*/
var marker, lineArr = [
[113.465972,23.167452],
[113.465964,23.167335],
[113.465968,23.167174],
[113.465924,23.166984],
[113.465556,23.165217],
[113.465707,23.165074],
[113.465777,23.165048],
[113.466662,23.164813],
[113.466662,23.164813],
[113.466632,23.164683],
[113.466576,23.164375],
[113.466428,23.163689],
[113.466393,23.16349],
[113.466393,23.16349],
[113.466124,23.163199],
[113.465586,23.162886],
[113.465334,23.162869],
[113.464753,23.162865],
[113.463902,23.162912]
];
marker = new AMap.Marker({
map: map,
position: [113.464753,23.162865],
icon: "https://webapi.amap.com/images/car.png",
offset: new AMap.Pixel(-26, -13),
autoRotation: true,
angle:-90,
});
function drawPath(){
// 绘制轨迹
var polyline = new AMap.Polyline({
map: map,
path: lineArr,
showDir:true,
strokeColor: "#AF5",//"#28F", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 6, //线宽
// strokeStyle: "solid" //线样式
});
var passedPolyline = new AMap.Polyline({
map: map,
// path: lineArr,
strokeColor: "#AF5", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 6, //线宽
// strokeStyle: "solid" //线样式
});
marker.on(‘moving‘, function (e) {
passedPolyline.setPath(e.passedPath);
});
map.setFitView();
marker.moveAlong([lineArr[lineArr.length-2],lineArr[lineArr.length-1]], 200);
}
记录一次开发试用记录，学习请看官网API，描写详细清晰
以上是关于高德地图API简单使用的主要内容，如果未能解决你的问题，请参考以下文章
腾讯地图或高德地图api开发，手机web页面能实现连续定位吗