本文通过利用高德地图的JS API做一个关于智慧校园的小案例，主要内容有地图展示、地图控件的添加、标注点添加、地点打卡、驾车路径规划动画展示，文章末尾附有完整代码。后续将继续跟进其他学习案例。
目录
-
- 前置工作
- 地图展示
- 地图控件的添加
- 实现点击某个地方进行标注、打卡
- 实现简单的驾车路径规划动画
- 上面案例的完整代码
前置工作
-
HTML页面的准备：创建一个id为container的地图容器
<div id="container"></div>对html、body、container设置宽高：
-
引入高德地图相关的CSS资源
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /> -
在高德开放平台上申请JS API的key和安全密钥，引入高德js相关的资源(将下面代码中的安全密钥和key替换即可)
地图展示
-
在js中创建地图对象(这样就会在界面上显示地图)
var map=new AMap.Map(‘container’,{
center:[118.91125,32.10296],//表示地图界面中心显示的位置
zoom:16,//表示地图级别
viewMode:‘3D’,//表示地图显示模式为3D，默认是2D
pitch:45,//初识地图俯仰角度
})
其他AMap.Map属性和方法参照：
AMap.Map属性和方法
地图控件的添加
// 异步加载工具条插件，在回调函数中实例化插件，并使用插件功能
AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.ControlBar','AMap.GeoJSON','AMap.MoveAnimation'],function(){
// 添加缩放控件插件到地图页面
map.addControl(new AMap.ToolBar({
position:{
top:'80px',
right:'40px',
},
}));
// 添加比例尺
map.addControl(new AMap.Scale());
// 添加控制罗盘控件
map.addControl(new AMap.ControlBar());
})
其他插件的使用参照：
插件列表
实现点击某个地方进行标注、打卡
监听地图的点击事件，当点击时调用函数
```html
map.on('click',function(e){
// 先创建标注对象
var marker=new AMap.Marker({
position:e.lnglat,// 获取点击事件的位置(经纬度)
}
})
map.add(marker);// 将标注添加到地图
})
```
-
进阶：实现点击事件打卡，保存数据，再次打开页面时，旧数据依然在，切可以继续打卡，并在页面上显示该地点打卡了几次。
// 定义一个全局变量，保存geojson var geojson = new AMap.GeoJSON({ geoJSON:null, })-
新数据打卡
map.on(‘click’,function(e){
var marker=new AMap.Marker({
position:e.lnglat,
extData:{
// 自定义属性
_geoJsonProperties:{
gid:geojson.getOverlays().length+1,// 打卡地点数+1
click:0,// 初始的点击数为0
}
}
})// 对标注点进行点击时：实现对新旧点击事件标记打卡 marker.on('click',function(e){ var ext=marker.getExtData();// 先得到属性 var click = ++ext._geoJsonProperties.click;// 将该标注地点的点击事件自增然后存到click变量中 // 使用信息提示框显示打卡信息 var infowindow=new AMap.InfoWindow({ anchor:'top-center',// 提示框显示的位置 content:`<div>打卡了${click}次</div>`, }) // 显示窗口信息:在地图上点击的标注位置上显示信息 infowindow.open(map,marker.getPosition()); // 将新数据重新保存；若没有保存，则下次加载进来的数据还是没有自增的click属性值 // 将其转为geojson格式再保存 saveData(geojson.toGeoJSON()); }) // 通过geojson来管理覆盖物 geojson.addOverlay(marker); // 保存数据(将geojson对象转换成标准的GeoJSON格式对象) saveData(geojson.toGeoJSON()) map.add(marker);})
-
旧数据打卡
// 读取和存储数据函数
// 从Localstorage中读取数据
function getData(){
//如果本地local storage中不存在数据
if(!localStorage.getItem(‘geojson’)){
//设置一个空的初始数据，即数据初始化
localStorage.setItem(‘geojson’,‘[]’)
}
//反之，因为localStorage中存放的是字符串数据，所以将字符串数据转换成JSON对象返回
return JSON.parse(localStorage.getItem(‘geojson’))
}// 将数据保存到Localstorage中
function saveData(data){
//需要将数据转换成字符串类型才能存入localStorage中
localStorage.setItem(‘geojson’,JSON.stringify(data))
}// 导入数据，当数据为空的时候，会报错，所以在数据不为空的时候才导入
// 因为getData()返回的是对象，所以需要先将其转为字符串，判断其是否为空字符串，即空数组
if(JSON.stringify(getData())!=‘[]’){
geojson.importData(getData())// 将得到的对象导入geojson变量中
// 恢复旧数据的点击事件：拿到geojson数据中的每一个点，对拿到的每一个标注点(覆盖物)设置点击监听
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());// 同样保存数据 }) })}
// 将导入的数据添加到地图上面；这样，刷新浏览器的时候数据就不会消失(相当于加载地图的时候就将原来存储的数据加进来)
map.add(geojson);
-
实现简单的驾车路径规划动画
先设置起点和终点，然后建立一个对象存储途径点经纬度坐标，然后将始末点和途径点传入driving.search函数中，遍历结果result.routes[0].steps中的每一个步骤，设置小车标注，实现动画效果
function starts(){
//首先引用驾车规划插件
AMap.plugin('AMap.Driving',function(){
// 创建驾车规划对象
var driving =new AMap.Driving({
map:map,// 显示在地图上
// policy:AMap.DrivingPolicy.LEAST_TIME,
policy:2,// 按照距离最短规划
})
// 设置起点和终点
var st=new AMap.LngLat(118.903607, 32.096752);
var end=new AMap.LngLat(118.918165, 32.098677);
// 通过geojson得到每一个点的坐标
var obs={
waypoints:[],
}
// 将geojson中每一个点数据的坐标添加到obs对象中
geojson.eachOverlay(function(item){
obs.waypoints.push(item.getPosition());
})
// 将点的对象传入
driving.search(st,end,obs,function(status,result){
if(status=='complete'){
// 路径规划成功，则接下来实现动画效果
// console.log(result);
var lineArr=[];// 创建存放路径的变量
result.routes[0].steps.forEach(function(item){
lineArr.push(...item.path);//遍历路线的每一个步骤，将其路径展开放入lineArr中
})
// console.log(lineArr);
//首先设置小车标记的起始位置
var marker=new AMap.Marker({
map:map,
position:st,
// 导入小车图标
icon:'https://webapi.amap.com/images/car.png',
// 为了不让小车压到路面，为其设置偏移量
offset:new AMap.Pixel(-26,-13),
// 小车在转弯的时候自动转头
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');
}
})
})
}
上面案例的完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智慧校园</title>
<!-- 引入高德地图相关的CSS资源 -->
<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%;
}
</style>
<!-- 引入高德js相关的资源 -->
<!-- 密钥和key -->
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "9497fb6552130d5d26e90c0c1082ca2a",
};
</script>
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=85aaa8a9d92f5a244271e3bc7494072f"></script>
<script src="./js/store.js"></script>
</head>
<body>
//创建地图容器
<div id="container"></div>
<!-- 高德地图css中自带有info样式 -->
<div class="info">点击地图，可标注地点；点击地点，可以打卡</div>
<!-- 高德css模板 -->
<div class="input-card" style="width: 17rem">
<h4>推荐浏览路线</h4>
<div class="input-item">
<button class="btn" onclick="starts()">开始动画</button>
</div>
</div>
</body>
<script>
//创建地图对象
var map=new AMap.Map('container',{
center:[118.91125,32.10296],
zoom:16,
viewMode:'3D',
pitch:45,
})
//使用地图控件
AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.ControlBar','AMap.GeoJSON','AMap.MoveAnimation'],function(){
map.addControl(new AMap.ToolBar({
position:{
top:'80px',
right:'40px',
},
}));
map.addControl(new AMap.Scale());
map.addControl(new AMap.ControlBar());
})
// 定义一个全局变量，保存geojson
var geojson = new AMap.GeoJSON({
geoJSON:null,
})
// 导入数据，当数据为空的时候，会报错，所以在数据不为空的时候才导入
// 因为getData()返回的是对象，所以需要先将其转为字符串，判断其是否为空字符串，即空数组
if(JSON.stringify(getData())!='[]'){
geojson.importData(getData())// 将得到的对象导入geojson文件中
// 恢复旧数据的点击事件：拿到geojson数据中的每一个点，对拿到的每一个点(覆盖物)设置点击监听(随着点击事件的发生，调用后面的函数)
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())
})
})
}
// 将导入的数据添加到地图上面；这样，刷新浏览器的时候数据就不会消失
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;
// 使用信息提示框显示打卡信息
var infowindow=new AMap.InfoWindow({
anchor:'top-center',//提示框显示的位置
content:`<div>打卡了${click}次</div>`,
})
//显示窗口信息:在地图上的marker上显示信息
infowindow.open(map,marker.getPosition());
saveData(geojson.toGeoJSON());//将新数据重新保存；因为没有保存读取数据的时候还是原来的值
})
// 通过geojson来管理覆盖物
geojson.addOverlay(marker);
// 保存数据(将geojson对象转换成标准的GeoJSON格式对象)
saveData(geojson.toGeoJSON())
map.add(marker);
})
function starts(){
AMap.plugin('AMap.Driving',function(){
var driving =new AMap.Driving({
map:map,
// policy:AMap.DrivingPolicy.LEAST_TIME,
policy:2,
})
// 设置起点和终点
var st=new AMap.LngLat(118.903607, 32.096752);
var end=new AMap.LngLat(118.918165, 32.098677);
// 通过geojson得到每一个点的坐标
var obs={
waypoints:[],
}
geojson.eachOverlay(function(item){
obs.waypoints.push(item.getPosition());
})
// 将点的对象传入
driving.search(st,end,obs,function(status,result){
if(status=='complete'){
// 路径规划成功，则接下来实现动画效果
// console.log(result);
var lineArr=[];
result.routes[0].steps.forEach(function(item){
lineArr.push(...item.path);//遍历路线的每一个步骤，将其路径展开放入lineArr中
})
// console.log(lineArr);
//首先设置小车标记的起始位置
var marker=new AMap.Marker({
map:map,
position:st,
icon:'https://webapi.amap.com/images/car.png',
// 为了不让小车压到路面，为其设置偏移量
offset:new AMap.Pixel(-26,-13),
// 小车在转弯的时候转头
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');
}
})
})
}
</script>
</html>
js代码
// 从Localstorage中读取数据
function getData(){
//如果本地local storage中不存在数据
if(!localStorage.getItem('geojson')){
//设置一个空的初始数据，即数据初始化
localStorage.setItem('geojson','[]')
}
//反之，因为localStorage中存放的是字符串数据，所以将字符串数据转换成JSON对象返回
return JSON.parse(localStorage.getItem('geojson'))
}
// 将数据保存到Localstorage中
function saveData(data){
//需要将数据转换成字符串类型才能存入localStorage中
localStorage.setItem('geojson',JSON.stringify(data))
}
本文参考的学习视频：GIS | 零基础入门WebGIS开发，《智慧校园》项目实战
