实现地图点击打卡，驾车路线。
需要自己去高德开发平台注册新建自己的项目保存key和秘钥
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入资源 -->
<!-- 1.高德地图基础css样式 -->
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<!-- 2.基础样式 -->
<link rel="stylesheet" href="./css//a.css">
<!-- 3.引入地图资源 -->
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "自己的秘钥",
}
</script>
<script src="https://webapi.amap.com/maps?v=2.0&key=自己的key"></script>
<!-- <script src="./js/store.js"></script> -->
</head>
<body>
<div id="container"></div>
<!-- 添加类名info、input-item...，使用高德里面的样式 -->
<div class="info">点击地图标注热门地点</div>
<div class="input-card" style="width:13rem">
<h4>推荐；浏览路线</h4>
<div class="input-item">
<button class="btn" onclick="startAnimation()">开始动画</button>
</div>
</div>
</body>
<script>
function getData(){
if(!localStorage.getItem('geojson')){
localStorage.setItem('geojson','[]')
}
return JSON.parse(localStorage.getItem('geojson'))
}
function saveData(data){
localStorage.setItem('geojson',JSON.stringify(data))
}
var map = new AMap.Map('container', {
center: [114.402672, 30.518987],
zoom: 16,
viewMode: '3D',
pitch: 45
})
AMap.plugin(['AMap.ToolBar',
'AMap.Scale',
'AMap.HawkEye',
'AMap.MapType',
'AMap.Geolocation',
'AMap.ControlBar',
'AMap.GeoJSON',
'AMap.MoveAnimation'
], function () {
// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
map.addControl(new AMap.ToolBar({
position: {
top: '80px',
right: '25px'
}
}));
map.addControl(new AMap.Scale());
map.addControl(new AMap.ControlBar());
})
// JSON数据
var geojson = new AMap.GeoJSON({
geoJSON: null
})
if (JSON.stringify(getData()) != '[]') {
// 导入数据
geojson.importData(getData())
// 恢复旧数据点击事件
geojson.eachOverlay(function (mak) {
mak.on('click', function (e) {
// console.log(e.lnglat, '点击了旧数据');
var ext = mak.getExtData()
var click = ++ext._geoJsonProperties.click
console.log('旧数据点击了' + click + '次');
// 1.使用信息提示框显示
var infowin = new AMap.InfoWindow({
anchor: 'top-center',
content: `<div>打卡了${click}次</div>`
})
//2. 显示提示框的位置
infowin.open(map, mak.getPosition())
saveData(geojson.toGeoJSON())
})
})
}
map.add(geojson)
// 地图点击事件添加标注
function handler(e) {
var marker = new AMap.Marker({
position: e.lnglat,
extData: {
_geoJsonProperties: {
gid: geojson.getOverlays().length + 1,
click: 0
}
}
})
// map.add(marker)
// 覆盖物的点击事件
marker.on('click', function (e) {
// console.log(e.lnglat, '点击了');
var ext = marker.getExtData()
var click = ++ext._geoJsonProperties.click
console.log('点击了' + click + '次');
saveData(geojson.toGeoJSON())
// 1.使用信息提示框显示
var infowin = new AMap.InfoWindow({
anchor: 'top-center',
content: `<div>打卡了${click}次</div>`
})
//2. 显示提示框的位置
infowin.open(map, marker.getPosition())
})
// 通过geojson对象来管理覆盖物、显示点
geojson.addOverlay(marker)
// 保存数据(将geojson对象转换成标准的GeoJSON格式对象)
saveData(geojson.toGeoJSON())
}
map.on('click', handler) //地图点击事件调用
//开始动画
function startAnimation() {
AMap.plugin(["AMap.Driving"], function () {
var driving = new AMap.Driving({
map: map,
//驾车策略，
policy: AMap.DrivingPolicy.LEAST_TIME
})
// 设计始点终点
var start = new AMap.LngLat(114.399282, 30.517028)
var end = new AMap.LngLat(114.408448, 30.522259)
// 通过eachOverlay获取途经点定位
var opts = {
waypoints: []
}
geojson.eachOverlay(function (item) {
opts.waypoints.push(item.getPosition())
})
driving.search(start, end, opts, function (status, result) {
if (status == 'complete') {
console.log('规划路线完成', result);
// 获取路径点数组
var lineArr = []
result.routes[0].steps.forEach((item) => {
lineArr.push(...item.path)
})
// 实现模拟轨迹
var marker = new AMap.Marker({
map,
position: start, //定位
icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png', //icon标注
offset: new AMap.Pixel(-25, -13), //偏移量
autoRotation: true, //自动转换角度，
angle: -160, //开始的车头方向
})
// 绘制线的设置
var passedPolyline = new AMap.Polyline({
map: map,
strokeColor: "#AF5", //线的颜色
strokrWeight: 6, //线宽
})
marker.on('moving', function (e) {
passedPolyline.setPath(e.passedPath)
})
map.setFitView();
marker.moveAlong(lineArr, {
duration: 500,
autoRotation: true
})
} else {
console.log('错误');
}
})
})
}
</script>
</html>css:
html,
body,
#container {
width: 100%;
height: 100%;
}实现效果
