ar x=document.getElementById("demo"); { if (navigator.geolocation){ navigator.geolocation.getCurrentPosition(showPosition); }else{x.innerHTML="Geolocation is not supported by this browser.";} } { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; }

代码逻辑是先判断你的设备支不支持这个接口，进而给出相应的经纬度。结合TGA城市赛这个案例，我们可以通过用户在访问页面的时候，获取其经纬度，判断用户所在的城市，自动为其选中地址，减少操作步骤。如图：

地址：

这里有一个小技巧，使用这个API我们只能获取到经纬度，那怎么转换成对应的具体地址呢？

1. 可以使用google的地图API：

?latlng=39.9,41.033&language=zh-CN&sensor=true

只要传入正确的经纬度，就能够返回相应的具体到街道的json数据。

2. 通过我们腾讯地图的地址解析，可以做到具体地理位置字符跟经纬度的转换。

#sample-geocoding-simple。

五、其它

1、字体图标应用设计环节的打通

问题：

字体图标在这个项目中大量应用，但面临的一个问题是，辅助前端开发的配套工具已经非常成熟，但设计环节的打通一直是一片空白。设计师在应用字体图标时还是只能以最原始的方式将图标拖入设计稿，十分不便。

解决：

为设计师提供一款Photoshop插件，将字体文件导入插件，设计师可以直接点击图标插入设计稿，将字体图标应用的设计环节打通，该插件正在开发中。

2、当transform碰上模糊

问题：

如下图ball1所示，在android中，如果元素或其父元素应用transform后，元素设置border-radius会变模糊。

解决：

将元素放大一倍后，再进行缩放（如果该元素后有文本节点，也可避免模糊）

: :: ::::

DEMO地址：

六、数据

1、用户环境

从TGA移动游戏官网统计数据分析：

1）、抽样50%访问量统计，移动端用户平均加速速度为70Kb/s；

2）、总加载时间为4.12s，86%的用户愿意等待页面加载完毕，52%的用户抵达第二屏；

3）、这次滚屏支持用户点击游戏图标或手指滑动，但只有7%的人会使用点击操作，我们后续项目的设计中可以得到启发。

分享到 > 　　

留言板

留言板系统维护中...暂不提供评论

LAST WORKS

最新上线 MORE »

ideas第09期 游戏类官网趋势的猜想 emily 游戏官网现状及微革新 jason MORE »

分类目录

链接表

RSS