在google map上显示Instagram的照片
2017-01-01 23:33
1056 查看
之前Instagram有一个在地图上显示照片的功能,可惜后来这个功能去掉了。INS的官方说法是因为这个功能的使用率很低,因此最后舍弃了这个功能。其实我觉得这个功能还蛮好的,看到自己的照片遍布全世界很有成就感啊!实验室的同学也觉得这个去掉这个功能很可惜,大家都看不到自己去过哪里了。于是同学做了一个网页用来显示Instagram的照片。大家感兴趣可以戳一下这里(需翻墙):Instagram Map. 代码戳这里:Instagram Map Code.
进入网页后需要登录自己的Instagram帐号,之后网页会自动读取账户里有打卡记录的照片显示在读图上。下面是我的Instagram帐号的显示效果。
点击照片后会显示照片的详细信息,包括拍摄日期,打卡地点以及图片的说明。效果如下。图中『奇莱南峰-3358m』即为打卡地点。这个地点是用户上传图片时从INS提供的几个候选地点中选的。
但是仅仅是简单地根据打卡地点将照片显示在地图上会有问题。因为很多照片的打卡地点是一样的,这样显示的照片是重叠的。好在google提供了解决方法:MarkerCluster,可以将同一地点的照片分开;同时也实现了缩放地图是照片聚集分散的效果。
其实只显示Instagram的照片对我来说不太够。我手机有5000多张照片(我是多么爱拍照~),都会同步到Google Drive(Google Drive与院校合作开放了无限量的存储空间);但是我时不时会『精选』一些照片修下图(我是多么闷骚),然后同步到OneDrive(因为Google Drive在国内不好用,原因懂的……但是好像OneDrive现在在国内用起来也不是很方便?),现在修过的照片也累计到300多张了,是时候展现一下了……
在同学代码的基础上,我直接连接了OneDrive账户然后获取照片列表记录,之后显示在地图上。OneDrive的照片没有打卡地点,只有经纬度坐标,因此还要利用Google Map的API将经纬度转换为字符串的地址(逆向地理编码,Reverse Geocoding),因此显示的地点都怪怪的。同样地,OneDrive里的照片都没有照片描述,因此显示出来的照片就没有描述信息了,不过之后想着用Google Vision API或是Microsoft的API自动生成照片描述。当然这种机器生成的描述信息也是怪怪的,都是关键字的堆叠。
OneDrive的照片显示效果如下,只显示有坐标的照片。
宝岛台湾的照片显示效果如下。分布跟Instagram差不多,只是数量有一些差别。
点击图片,显示的地点是经纬度转换而成的详细地址。
目前显示的照片有点问题,缩小地图查看时有些照片会有重叠,如下图所示,标有数字3的照片显示有问题。但其它单独显示的两种照片没有问题。放大地图显示照片时正常。还没有找到原因。估计是OneDrive获取的缩略图尺寸大小的问题或是缩小查看时多张照片叠加显示的问题。
进入网页后需要登录自己的Instagram帐号,之后网页会自动读取账户里有打卡记录的照片显示在读图上。下面是我的Instagram帐号的显示效果。
点击照片后会显示照片的详细信息,包括拍摄日期,打卡地点以及图片的说明。效果如下。图中『奇莱南峰-3358m』即为打卡地点。这个地点是用户上传图片时从INS提供的几个候选地点中选的。
但是仅仅是简单地根据打卡地点将照片显示在地图上会有问题。因为很多照片的打卡地点是一样的,这样显示的照片是重叠的。好在google提供了解决方法:MarkerCluster,可以将同一地点的照片分开;同时也实现了缩放地图是照片聚集分散的效果。
其实只显示Instagram的照片对我来说不太够。我手机有5000多张照片(我是多么爱拍照~),都会同步到Google Drive(Google Drive与院校合作开放了无限量的存储空间);但是我时不时会『精选』一些照片修下图(我是多么闷骚),然后同步到OneDrive(因为Google Drive在国内不好用,原因懂的……但是好像OneDrive现在在国内用起来也不是很方便?),现在修过的照片也累计到300多张了,是时候展现一下了……
在同学代码的基础上,我直接连接了OneDrive账户然后获取照片列表记录,之后显示在地图上。OneDrive的照片没有打卡地点,只有经纬度坐标,因此还要利用Google Map的API将经纬度转换为字符串的地址(逆向地理编码,Reverse Geocoding),因此显示的地点都怪怪的。同样地,OneDrive里的照片都没有照片描述,因此显示出来的照片就没有描述信息了,不过之后想着用Google Vision API或是Microsoft的API自动生成照片描述。当然这种机器生成的描述信息也是怪怪的,都是关键字的堆叠。
OneDrive的照片显示效果如下,只显示有坐标的照片。
宝岛台湾的照片显示效果如下。分布跟Instagram差不多,只是数量有一些差别。
点击图片,显示的地点是经纬度转换而成的详细地址。
目前显示的照片有点问题,缩小地图查看时有些照片会有重叠,如下图所示,标有数字3的照片显示有问题。但其它单独显示的两种照片没有问题。放大地图显示照片时正常。还没有找到原因。估计是OneDrive获取的缩略图尺寸大小的问题或是缩小查看时多张照片叠加显示的问题。
连接OneDrive获取照片
连接OneDrive费了我一番功夫。OneDrive提供了一个简单的例子:OneDrive Explorer JS. 我的code便是在这个例子上修改而成。从OneDrive中获取照片并显示在Google Map上的代码如下:Foto-Map. 目前是第一个版本,可能会有一些bug,也不会有多好看。相关文章推荐
- Winform中使用PictureBox显示及修改数据库中的照片
- Windows Phone 学习 直接在手机中选择照片并且显示
- ASP访问SQL进行注册与登录(登录成功后显示其照片)
- cookie---照片浏览历史显示
- google map限制地图缩放级别和显示范围
- 照片分享应用Instagram用户突破4千万
- Android 调用系统地图(Google Map)并显示具体方位
- android 调用摄像头进行拍照,并对照片进行裁剪,然后显示。
- 上传照片到网址并且封装OkHttp并显示数据
- 学习制作google map地图无法显示问题
- ireport显示数据库照片字段,即Blob字段
- Android获取图片资源之——拍照后在程序中显示照片
- Django,ImageFiled上传照片并显示
- 选中照片显示预览 支持IE6 IE7
- SharePoint 2013技巧分享系列 - 同步Exchange显示高清用户照片
- 选择图库中照片GridView显示
- 查询相册里的照片,每个分类只显示4条信息(经典SQL)
- 利用Picasso显示照片墙遇到的问题
- js+css完成网站的会员照片信息显示效果
- Android获取图片资源之——拍照后在程序中显示照片