可以在前端实现的几个地理位置小功能

在Smashing Magazine上看到这篇Entering The Wonderful World of Geo Location,介绍了获取并处理用户地理位置的应用和方法,很有意思。结合原文的内容,加上之前的一些应用,整理了几个可以完全在前端实现的地理位置相关小功能。

1.通过IP获取用户位置

很多时候需要通过IP判断用户的位置,通常的办法是通过自己的后台程序查询数据库得到。如果用户位置只是应用在前端,或者有其他的特殊原因(比如,懒:),也有一些其他办法来快速的获取用户位置。

maxmind.com提供了一个服务,通过引入一个js文件(http://j.maxmind.com/app/geoip.js),可以把他判断到的用户的国家、城市、经纬度等信息加入到页面中来。下面是从青岛访问这个js文件返回的内容:
阅读全文 »

TED2010:下一代的地图技术在微软而非Google

点击”View subtitles”可以显示中文字幕

阅读全文 »

JavaScript程序执行顺序问题总结

好记星不如烂笔头,适时的总结梳理知识让人更轻松愉快。今天总结下学习和开发中遇到的JavaScript执行顺序的问题,今天挖个坑,以后会慢慢填,也希望抛砖引玉,能学到更多的东西。

顺序可能比较乱,写多了再整理,有些术语可能运用也不恰当,欢迎批评指正。以下使用的示例程序都经过了本人的实际验证,兼容各大浏览器。OK,步入正题。

1. 变量的声明和引用

变量必须先声明后引用,这个大家是都知道的,但还是要说说,因为后面要说到一个相关的问题。

alert(myStr); // 弹出"undefined";
var myStr = "Hello World!";
alert(myStr); // 弹出"Hello World";

2. 函数的声明和调用

阅读全文 »

Google Maps Api介绍与基础操作

一. 关于Google Maps Api

“API”,即“应用程序编程接口”,是指软件或网站为第三方开发人员提供的接口,利用这个接口,可以使用软件的一些功能而不必了解它的内部机理。

具体拿Google Maps Api来说,它提供了一个JavaScript库,具体就是我们上节课在页面头部引入的这个url:http://ditu.google.com/maps?file=api&v=2&key=KEY ,它会自动载入地图所需的js文件,Firefox肿的Firebug插件是前端开发必备工具,使用它我们可以方便的查看网页的内容,可以看到Google Maps Api引入的几个JS文件:


( Google Maps Api引入的文件 )
阅读全文 »

国产先行——比Google抢先的中国街景地图

Google由于法律问题迟迟未能进入中国拍摄街景地图,而中国有公司已经抢了先,并且数据已相当丰富,拍摄完成了许多县级市的地图,一起欣赏一下: http://www.city8.com/

青岛教堂

阅读全文 »

Google Maps经纬度编码算法的JavaScript及PHP实现

Google Maps API 的 GPolyline和GPolygon类提供了工厂方法fromEncoded,可以将大量的经纬度信息编码为简短的字符串,方便网络传输和存储。

这里是Google对此算法的说明:http://code.google.com/intl/zh-CN/apis/maps/documentation/polylinealgorithm.html

这里是Google在线编码程序英文版(中文版目前出错不可用):http://code.google.com/apis/maps/documentation/polylineutility.html

由于我们在实际开发中会经常对经纬度信息进行编码,在服务端使用PHP编码发送,在客户端使用JavaScript编码提交,今天对这两种语言的编码程序进行了整理,发出来共享,有需要的可以下载。

另外本人正在编写一系列PHP+Google Maps API的网站开发教程,欢迎关注,教程地址:oncoding.net

点击下载

幼学笔记原创内容,根据CC协议发布,欢迎具名转载。

网站开发系列教程

投身web开发以来,阅读甚广,中间屡有所得所思,但疏于笔端,懒得记录,终致流失。

昨与友人闲谈,心血来潮,欲将自身知识与思想,溶于一系列教程,一为飨读者,二为完自身。遂策划得名为“前端开发实战教程—基于PHP、GoogleMapApi的网站项目开发”,昨得其第一篇,发布于网端。网络诸友,若有好之者,欢迎传阅之,批评之,改进之。

第一篇网络地址:http://oncoding.net/javascript/source/article200903/apus-01.htm

项目代码地址:http://apus.googlecode.com

项目演示地址:http://apus.net.cn