WebGIS第十课：智慧校园项目（2）

这就是这一课的成品，实现了打卡功能，能在标记点显示打卡次数。标记点不会消失，就算重启浏览器也能保存。

书接上回，我们用geojson实现了标记点的保存，那么怎么来实现打卡功能呢，这就需要监听标记点的点击事件了。

上一节说的是监听map的点击事件，实现了新增热门标记点的功能，现在就来实现下监听标记点的点击事件，一样的语法：

marker.on('click',function(e){ }

当点击标记时，就能启动function。为了保存打卡次数，需要对标记点进行属性赋值，这时候就需要对geojson进行修改：

            var marker = new AMap.Marker({  // 创建标记position:e.lnglat,extData:{_geoJsonProperties:{gid: geojson.getOverlays().length+1,click:0,},}})

这里设置了gid就是标记序号属性，从1开始；还有点击属性，用来记录点击次数，初始值为0.

创建marker后，还要给marker创建绑定事件。注意，这是写在map.on事件中的。语法就是上面的写法。

这样，就只有对新创建的marker才绑定了点击事件。

但是，对于已有的marker就没办法监听了，这时候，还要对已有的marker绑定。

已有的marker都是通过importData的方式拿到的。这时候就需要再导入的时候，就对这些已有的数据进行绑定点击事件。

// 导入数据if(JSON.stringify(getData()) != '[]'){ // 判断local是否有数据geojson.importData(getData()) //导入数据geojson.eachOverlay(function(item){item.on('click',function(e){console.log(e)})}map.add(geojson)   // 将geojson添加到地图

函数里item就是旧的数据的每一项，这样就给每个marker都绑定点击事件了。这里eachOverlay是一个对geojson进行遍历的方法。

设置好事件后，就需要实现，当用户点击i标记时，点击属性加1.这时候就在事件中实现：

                var ext = marker.getExtData()var click = ++ext._geoJsonProperties.click

这个意思就是先获取extdata属性值赋予ext变量，然后从中提取click属性，当点击时候，就加1，然后赋值给click变量。

同样的内容，也得给旧标记点在来一次，复制过去即可

                item.on('click',function(e){var ext = item.getExtData()var click = ++ext._geoJsonProperties.click}

这就实现了新旧点在点击时都能让click属性加1.

注意：如果调试时，需要先把已有的geojson存储删除，因为这里已经改变了geojson的结构，已有的数据是没有这些属性的。

实现上述步骤后，还有个问题，就是click的值并没有实现在本地存储geojson数组中的保存，所以还得加上一句：

saveData(geojson.toGeoJSON())

这样才能实现在local storage中的保存。

同样的这个操作也需要在新旧标记都要进行一遍。

这样就实现了打卡功能，但是，打卡次数现在是在控制台输出的，如何让用户看见呢，这样就需要使用信息框了。

思路就是把console.log替换成消息框的显示模式。

                // 使用消息提示框var infowindow = new AMap.InfoWindow({anchor:'top-center',//模板字符串content:`<div>打卡了${click}次</div>`,})

这样来实现消息的显示，注意，这个也是在map.on里实现的，接下来就是显示：

             // 打开信息窗infowindow.open(map,marker.getPosition())

就是实现了消息窗在哪里显示。当然，新旧标记都要来实现一遍。

有个小问题：为什么点击标记时候，不会触发点击map时候的新加标记的事件？

WebGIS第十课：智慧校园项目（2）相关推荐

WebGIS第十二课：智慧校园项目（4）
最后我们来谈一下动画的实现动画实际可以理解为对轨迹的模拟,当路径成功生成后,激发对路径的模拟,这里用判断语句来实现这个逻辑: driving.search(start,end,opts,functi ...
WebGIS第九课：智慧校园项目（1）
数据持久化,我们之前做的都是临时数据,为了很好的存储地理数据,我们使用GeoJSON格式. # 1 引入资源创建地图代码: <!DOCTYPE html> <html lang= ...
【新鲜出炉】腾讯云拿下新一代智慧校园项目，中台是建设重点
2022年9月5日,中山大学新一代智慧校园建设项目(一期)(中大招(服)[2022]119号/CLF0122GZ08ZC90)发布中标结果公告. 一.项目编号:中大招(服)[2022]119号/CLF ...
java做智慧校园项目_智慧校园项目解决方案.ppt
基于云服务平台的智慧校园解决方案目录第一部分第二部分智慧校园整体解决方案讲解 (概念.优劣对比.涵盖范围.云计算优势) 智慧校园产品优势劣势分析解决方案讲解--智慧校园什么是智慧校园?? ...
WebGIS第十一课：智慧校园项目（3）
推荐游览路线和动画效果本课先实现导航功能,就是路劲规划功能. 首先,在地图上添加一个div框,实现导航按钮. 代码: <div class="input-card" sty ...
Axure高保真智慧校园管理系统/校园管理/人事管理/学籍管理/教学管理/流程审批/备课管理/考务管理/成绩管理/排课管理/选课管理/选课系统/调课申请/教师考评管理/web端管理系统
Axure高保真智慧校园管理系统/校园管理/人事管理/学籍管理/教学管理/流程审批/备课管理/考务管理/成绩管理/排课管理/选课管理/选课系统/调课申请/教师考评管理/web端管理系统 Axure原型 ...
智慧校园管理系统、智慧学工、办公自动化、校园管理、人事管理、学籍管理、教学管理、流程审批、备课管理、考务管理、成绩管理、排课管理、选课系统、调课申请、教师考评、学期配置、综合测评、绩效管理
智慧校园管理系统.智慧学工.办公自动化.校园管理.人事管理.学籍管理.教学管理.流程审批.备课管理.考务管理.成绩管理.排课管理.选课系统.调课申请.教师考评.学期配置.综合测评.绩效管理.web端管 ...
案例 | 蓝天智通：智办事助力“智慧校园”数智化管理，提升人效
01.客户介绍北京蓝天智通科技有限公司以物联网.虚拟化技术为基础,开发数智校园一体化管理系统,助力中国教学管理,实现数字化.可视化.智能化,打造数字孪生智慧校园,赋能教育行业,提高教育信息化和现代化 ...
物联网平台如何切入智慧校园
智慧校园是指以促进信息技术与教育教学深度有效融合.提高学与教的效果为目的. 可以简单理解为智慧校园＝1个数据中心+智慧校园基础设施 +智慧校园应用系统+智慧性资源去年3月份,教育部印发<教育信 ...

WebGIS第十课：智慧校园项目（2）

WebGIS第十课：智慧校园项目（2）相关推荐

最新文章

热门文章