阅读量:2
本文通过利用高德地图的JS API做一个关于智慧校园的小案例，主要内容有地图展示、地图控件的添加、标注点添加、地点打卡、驾车路径规划动画展示，文章末尾附有完整代码。后续将继续跟进其他学习案例。
目录
前置工作
HTML页面的准备：创建一个id为container的地图容器
<div id="container"></div>对html、body、container设置宽高：
<style> html, body, #container{ width: 100%; height: 100%; } </style> 引入高德地图相关的CSS资源
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />在高德开放平台上申请JS API的key和安全密钥，引入高德js相关的资源(将下面代码中的安全密钥和key替换即可)
<script type="text/javascript"> window._AMapSecurityConfig = { securityJsCode: "你的安全密钥", }; </script> <script src="https://webapi.amap.com/loader.js"></script> <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你的key"></script> <script src="./js/store.js"></script> 地图展示
- 在js中创建地图对象(这样就会在界面上显示地图)
var map=new AMap.Map('container',{ center:[118.91125,32.10296],//表示地图界面中心显示的位置 zoom:16,//表示地图级别 viewMode:'3D',//表示地图显示模式为3D，默认是2D pitch:45,//初识地图俯仰角度 }) 其他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:'/zb_users/upload/2024/csdn/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:'/zb_users/upload/2024/csdn/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开发，《智慧校园》项目实战
