如何通过IP地址确认用户位置,做一个可视化的地图应用?

最近做了个地图类的移动网页互动,需要标注每个地区的互动参与量,需要收集用户所在位置,然后在地图中呈现各个地区参与量的热力图。这个互动需要用户登陆授权,限制每个用户只能参与一次,参与后可以参与抽奖,并发放虚拟门票的奖品。

明确了互动只在微信中进行传播与分享,所以只开发微信授权登陆即可(需要微信服务号,并进行授权开发,微信授权我们已经做过通用的业务接口,只需新应用调用就可以),无需考虑多平台账户的登陆问题,地理位置获取也就优先考虑微信中可以取得的方式。

参考文档:微信网页用户授权拉取用户信息:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

微信中打开网页需要用到用户的定位信息,考虑了几种实现方式。

方案一是通过微信用户的授权登录来获取用户资料中的地区信息,这种方式只需要一次授权就能拉取到用户微信资料中的所在城市,但考虑到用户填写的地区信息不一定准确,而且开发过程中还需要弹出窗口明确获取微信信息授权,数据准确性和体验上都不佳。

方案二考虑的是使用微信的jssdk接口获取用户的地理位置信息,获得经纬度信息。通过调用地图开放接口的经纬度与位置地区转换,获得用户所在城市。

这个方式需要两次弹出确认,一次用户授权和一次地理位置获取的确认,位置精度能够保证,但体验同样打折扣。如果并发量大的话就需要购买地图api的提额服务。

如果想用免费配额,并发次数不够用,需要提前进行应用的配额提升申请。虽然腾讯地图可以免费提额,但按照以往经验,提额前需要现有额度已经快不够用了,审核还需要3个工作日。对于新上线的应用,并且上线当天就需要保证几十万的用户登陆和地址转换的需求,不能只使用免费接口,还需要直接购买请求数。

免费提额适用于用户数据平稳增长的业务。

参考文档:
微信jssdk(地理位置获取):https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

腾讯地图开放平台:(/ws/geocoder/v1?location=* (逆地址解析(位置描述)))https://lbs.qq.com/index.html

高德地图开放平台:https://lbs.amap.com/

百度地图开放平台:http://lbsyun.baidu.com

方案三是通过用户的IP地址进行定位,此方式可以通过微信用户无确认授权登陆。体验最好,因为这次应用的地区精度只需要精确到市一级,现有的一些IP定位服务都能满足需要,支持的并发和请求配额不需要购买就能满足。

测试过程中发现移动端的应用通过IP进行地理位置定位的数据库不能继续沿用以前的web端使用的IP数据库,网上开源这些web时期的IP库的数据对移动数据的IP定位不准确,定位经常乱飞,基本不能使用。需要换成新的IP库或者开放接口。
测试了解的IP定位是下面的几种方式:

高德地图开放平台的IP定位:https://lbs.amap.com/api/webservice/guide/api/ipconfig
百度地图IP定位:http://lbsyun.baidu.com/index.php?title=webapi/ip-api
腾讯地图IP定位:https://lbs.qq.com/webservice_v1/guide-ip.html
淘宝IP定位服务:http://ip.taobao.com/index.html
IPIP 地址库:https://www.ipip.net/

测试demo:
高德IP定位测试:http://e.bitx.cn/ip/gd.html
淘宝IP库定位测试:http://e.bitx.cn/ip/

最后做这个互动应用选择的是通过IP方式进行地区定位,微信网页无确认授权获取获得基础信息。整个应用体验效果不错,得到了客户的好评。

一个简单的小互动应用,虽然功能不多,但也用到了大量的平台服务和之前开发过的基础组件,只需应用开发同事关注业务流程的实现即可,也保证了整个应用的快速开发和上线。

应用配图:红动齐鲁全民参与启动仪式的互动。
0

这个应用做完了,也重新梳理了一次IP定位的应用场景和形式,为了能够测试IP定位的准确性,我特意做了一个测试的API,使用的淘宝IP库进行验证。应用做完了,又可以提取出一个公用的小工具模块,以后有这类业务需求就可以直接使用了。

测试时为了省事,程序能够自动抓取IP,并输出简易的用户IP、所在地区、使用的宽带。

这个测试页面最近又在其他项目中有应用,还增加了通过本地Cookie记录设备唯一标识作用,临时使用一下,后续还可以抽取出一个专门的唯一设备标识的功能,维护一个用户统一合并应用。

做这个互动应用不光是考验用户定位功能,地图组件的web渲染和热力图也遇到了问题,正常情况下,地图组件直接使用的百度ECharts的热力图组件就可以了。但在这次实际使用的过程中还是遇到了问题,ECharts 因为地图测绘不准确的原因不再提供地图的底图数据文件下载,如果需要地图地图数据要么自己用百度地图当地图,要么自己做一个地图数据文件。

我们这个应用需要显示山东省的16地市分布区域分界以及参与人数的热力图或城市热度图,但网上能下载到的地图GEO边界数据都是2018年的,2018年的地图中山东省是有17个市,最近济南和莱芜合并以后变成了16个地市,已经做好的GEO数据没有新的。都是济南和莱芜分开的,这种政治错误要足够敏感,不能直接使用。

这个问题把前端同事愁坏了,自己弄了一晚上也没有把济南和莱芜的地图分界线合并起来, 给我打电话说临时只能显示17地市了。

第二天我找了一下,很快解决了山东省2019年的新地市分界线的GEO.json 。解决方式很简单,别人已经都做好的全国GEO三级数据下载,只需要找到可以随地图更新的geo数据源下载下来就可以了。只需掌握一些找到这个数据源的方法就行了。我是通过ECharts 的 Gallery 社区找到的下载和生成最新省市geo.json文件的,在这里可以找到很多针对ECharts的开源的作品。

这里列一下 我们做这个地图时学习参照的一些ECharts 资源:
百度开源图表工具:https://echarts.baidu.com/

人口密度图:https://echarts.baidu.com/examples/editor.html?c=map-HK

山东省地图边界(旧数据):
https://gallery.echartsjs.com/editor.html?c=xSkUQiHdBz

全国GEO最新数据下载:https://gallery.echartsjs.com/editor.html?c=xr1IEt3r4Q

全国GEO最新数据下载(推荐)可下载最新2019山东省16市地图边界GEO.json数据:https://gallery.echartsjs.com/editor.html?c=xmCAi_XNuJ

全国GEO数据地图边界开源:https://github.com/TangSY/echarts-map-demo

看了一下这个开源的GEO数据获取的原理,通过百度地图获取地区信息,然后去高德地图开放平台把GEO和地区边界获取到,再渲染到ECharts 中,生成下载文件。也是很曲折的操作,如果让我想事很没有耐心做这个事情的,这个程序需要整合数据、提取数据再整合起来。这也是提供通用业务能力接口的意义所在,通过基础接口的整合和应用,可以让程序员快速开始业务模块开发,有人用一次复杂的开发,做出通用接口和数据提取程序,为以后的使用提供便利。

ECharts 适合在web端的可视化和图表上进行快速开发,最近才开始尝试着在可视化项目中应用web模式,之前一直在用奥威包装引擎,VTUZE渲染引擎的方案做可视化项目。

实际上用WEB还是我最熟悉的,但也是因为最熟悉,也是最头大的,有什么想法同事说实现不了的,我总想试试手,规划时就开始考虑web前端开发里面的坑,而其他渲染方式,里面的组件很多是其他同事来做,我只需要考虑效果达到预期就好了。

熟悉前端开发也许成了限制了我选择web方案做可视化项目的障碍,以后要突破下,根据实际情况选择合适方案才行。

对可视化感兴趣可以加我好友一起聊一聊。

发表评论

电子邮件地址不会被公开。 必填项已用*标注