高德地圖使用
api地址
https://lbs.amap.com/api/javascript-api/summary
高德地圖有提供公共接口，查看api，能實現一些項目基本需求效果
基本使用
注冊帳號
使用高德api，首先需要注冊帳號，並且申請key(以個人或者公司的名字)，獲取key后才能使用高德地圖API去使用開發地圖相關功能
高德地圖使用，省圖顯示，路線規划，行車軌跡
行車路線規划
已行駛軌跡繪制
monitor.html
<!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，描寫詳細清晰