本文通过利用高德地图的JS API做一个关于智慧校园的小案例，主要内容有地图展示、地图控件的添加、标注点添加、地点打卡、驾车路径规划动画展示，文章末尾附有完整代码。后续将继续跟进其他学习案例。

目录

• • 前置工作
  • 地图展示
  • 地图控件的添加
  • 实现点击某个地方进行标注、打卡
  • 实现简单的驾车路径规划动画
  • 上面案例的完整代码

前置工作

• HTML页面的准备：创建一个id为container的地图容器

  对html、body、container设置宽高：

• 引入高德地图相关的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:`
  打卡了${click}次
  `,         })         // 显示窗口信息:在地图上点击的标注位置上显示信息         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:`
  打卡了${click}次
  `,             })              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');             }         })     }) } 

上面案例的完整代码

                                                                      //创建地图容器     
          
点击地图，可标注地点；点击地点，可以打卡
          
         
推荐浏览路线
         
             开始动画         
     
    

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开发，《智慧校园》项目实战