webGIS使用JS,高德API完成智慧校园项目打卡功能

代码实现：

        var map =new AMap.Map('container',{
            center:[],//目标点的中心位置
            zoom:16,
            viewMode:'3D',
            pitch:45,
        })

        //使用控件
        AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.ControlBar','AMap.HawkEye','AMap.MoveAnimation'],
        function(){
            map.addControl(new AMap.ToolBar(
               { position:{
                    top:'100px',
                    right:'30px',
                },
                }
            ))
            map.addControl(new AMap.Scale())
            map.addControl(new AMap.ControlBar())
            map.addControl(new AMap.HawkEye(  
                { position:{
                    top:'163px',
                    right:'5px',
                },
                }))
        }
        )
        //定义全局变量保存geojson
        var geojson = new AMap.GeoJSON({
            geoJSON:null,
        })
        //导入数据
        if(JSON.stringify(getData())!='[]'){
            geojson.importData(getData())
            //恢复旧数据的点击事件
            geojson.eachOverlay(function(item){
                item.on('click',function(e){
                        //console.log(e.lnglat,'old')
                        //让点击的marker对象的click属性+1

                var ext =item.getExtData()
                var click = ++ext._geoJsonProperties.click
                saveData(geojson.toGeoJSON())
                  //使用消息提示框显示
                  var infowindow = new AMap.InfoWindow({
                    anchor:'top-center',
                    content:`<div>打卡了${click}次</div>`,
                })
                //显示（打卡信息窗口）
                infowindow.open(map,item.getPosition())
                })
            })
        }
        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){
               // console.log('new')
               //让点击的marker对象的click属性+1
               var ext =marker.getExtData()
                var click = ++ext._geoJsonProperties.click
                saveData(geojson.toGeoJSON())
                //使用消息提示框显示
                var infowindow = new AMap.InfoWindow({
                    anchor:'top-center',
                    content:`<div>打卡了${click}次</div>`,
                })
                //显示（打卡信息窗口）
                infowindow.open(map,marker.getPosition())

            })

注意：此段为调用高德API 的script代码，其中坐标需填写自己所需的，可使用坐标拾取器获得