1.首先需要在高德地图官网申请自己的账号和key
步骤如下:
2.实现显示地图
2.1 引入资源 创建地图
<!-- 引入资源 -->
<script type="text/javascript">
// 引入密钥和key值
window._AMapSecurityConfig = {
// 这里写自己申请的安全密钥
securityJsCode: 'b015002be73d099ca1138212dc65d497',
}
</script>
<!-- 这里写自己申请的key值 -->
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=5d654dec4fa284f641fde765ea5bc604&plugin=AMap.GeoJSON">
</script>
<!-- 引入jquery资源 -->
<script src="../jquery.min.js"></script>
<!-- 引入高德所给的css样式 -->
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
然后利用高德地图所给的demo,实现地图的显示
<!-- 创建地图容器 -->
<div id="container">
</div>
var map = new AMap.Map('container', {
center: [118.910321, 32.105220],
zoom: 16,
viewMode: '3D',
pitch: 45,
});
地图显示:(这里中心点设置的是南京师范范大学仙林校区)
2.2 实现添加控件
// 使用控件
AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.ControlBar', 'AMap.MoveAnimation'], function () {
map.addControl(new AMap.ToolBar({
position: {
top: '80px',
right: '40px'
}
}))
map.addControl(new AMap.Scale);
map.addControl(new AMap.ControlBar);
})
添加结果展示如下:
2.3 实现标记功能
这里使用高德的css样式来创建一个div控件:
<div class="info">点击地图热门地点</div>
之后再添加地图点击监听事件:
// 监听地图点击事件
map.on('click',function(e){
// 创建标记
var marker = new AMap.Marker({
position:e.lnglat,
})
// 添加标记图层
map.add(marker)
})
效果如下:
2.4 实现数据永久存储
使用GeoJSON在本地存储中记录数据。代码如下:
扫描二维码关注公众号,回复:
15193062 查看本文章
// 定义一个全局变量
var geojson = new AMap.GeoJSON({
geoJSON: null,
})
if (JSON.stringify(getData()) != '[]') {
// 导入数据
geojson.importData(getData())
// 恢复旧数据的点击事件
geojson.eachOverlay(function (item) {
item.on('click', function (e) {
var ext = item.getExtData()
var click = ++ext._geoJsonProperties.click
var infowindow = new AMap.InfoWindow({
anchor: 'top-center',
content: `<div>打卡了${click}次</div>`
})
infowindow.open(map, item.getPosition())
saveData(geojson.toGeoJSON())
})
})
}
// 将geojson加载到地图上
map.add(geojson)
// 监听地图的点击事件
map.on('click', function (e) {
var marker = new AMap.Marker({
position: e.lnglat,
extData: {
_geoJsonProperties: {
gid: geojson.getOverlays().length + 1,
click: 0,
},
}
})
// 使用覆盖物的点击事件
marker.on('click', function (e) {
var ext = marker.getExtData()
var click = ++ext._geoJsonProperties.click
// console.log('点击了' + click + '次')
// 使用消息提示框显示
var infowindow = new AMap.InfoWindow({
anchor: 'top-center',
content: `<div>打卡了${click}次</div>`
})
// 打开信息窗口
infowindow.open(map, marker.getPosition())
saveData(geojson.toGeoJSON())
})
// 数据持久化
// map.add(marker)
geojson.addOverlay(marker)
// console.log(geojson)
saveData(geojson.toGeoJSON())
})
// 从local storage中读取数据
function getData() {
//判断本地local storage中不存在数据
if (!localStorage.getItem('geojson')) {
localStorage.setItem('geojson', '[]')
}
return JSON.parse(localStorage.getItem('geojson'))
}
// 从local storage中写数据
function saveData(data) {
localStorage.setItem('geojson', JSON.stringify(data))
};
2.5 实现导航功能
首先,在地图上添加一个div框,实现导航按钮。
<div class="input-card">
<h4>推荐路线</h4>
<div class="input-item">
<button class="btn" onclick="startAnimation()">开始动画</button>
</div>
这里实现了,一个可以点击导航的按钮:
按这个按钮的时候,用户希望获取路线。这里就需要写一个回调函数。
这里起点和终点我分别设置的是南师大一号门和南师大六号门
function startAnimation() {
// console.log('开始动画')
AMap.plugin('AMap.Driving', function () {
var driving = new AMap.Driving({
map: map,
policy: AMap.DrivingPolicy.LEAST_TIME,
})
// 设置起点和终点
var start = new AMap.LngLat(118.912561, 32.100193)
var end = new AMap.LngLat(118.916887, 32.113263)
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(function (item) {
lineArr.push(...item.path)
});
var marker = new AMap.Marker({
map: map,
position: start,
icon: 'https://webapi.amap.com/images/car.png',
offset: new AMap.Pixel(-13, -26),
autoRotation: true,
angle: 180,
})
var passedPolyline = new AMap.Polyline({
map: map,
strokeColor: '#AF5',//描边的绿色
strokeWeight: 6,//线宽
})
marker.on('moving', function (e) {
passedPolyline.setPath(e.passedPath)
})
map.setFitView()
marker.moveAlong(lineArr, {
duration: 500,
autoRotation: true,
})
} else {
console.log('error')
}
}
)
})
}
接着设置途径点,上面代码已经展示。最终路线规划为:
2.7 实现动画效果
代码如下:
function startAnimation() {
// console.log('开始动画')
AMap.plugin('AMap.Driving', function () {
var driving = new AMap.Driving({
map: map,
policy: AMap.DrivingPolicy.LEAST_TIME,
})
// 设置起点和终点
var start = new AMap.LngLat(118.912561, 32.100193)
var end = new AMap.LngLat(118.916887, 32.113263)
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(function (item) {
lineArr.push(...item.path)
});
var marker = new AMap.Marker({
map: map,
position: start,
icon: 'https://webapi.amap.com/images/car.png',
offset: new AMap.Pixel(-13, -26),
autoRotation: true,
angle: 180,
})
var passedPolyline = new AMap.Polyline({
map: map,
strokeColor: '#AF5',//描边的绿色
strokeWeight: 6,//线宽
})
marker.on('moving', function (e) {
passedPolyline.setPath(e.passedPath)
})
map.setFitView()
marker.moveAlong(lineArr, {
duration: 500,
autoRotation: true,
})
} else {
console.log('error')
}
}
)
})
}
之后点击开始动画按钮就可以实现路线的自动执行
3.出现的问题
上面的代码出现好多问题:
(1)有的函数声明出现问题,会报错
(2)错误显示如下:
原因主要是忘记写new 开辟一个新的对象
总之,修改BUG的过程确实比较慢,但是能解决就很开心呢,也锻炼了自己的耐心。