Marshal's Blog

gwt使用html5的Geolocation api

html5提供geolocation api，用于获取浏览器所处地理位置相关信息。

通过pc上面的chrome/firefox访问获得的经纬度，发现还是很准的。

获得经纬度，可以通过：

http://maps.google.com/

在输入框中输入：纬度,精度，就可以得到对应的卫星图或者地图。

代码编写也很容易，这里使用了gwt，其实即使不使用gwt，写javascript也很简单。

这里使用的gwt模块，文档地址在：

http://code.google.com/p/gwt-mobile-webkit/wiki/GeolocationApi

下载地址：

http://code.google.com/p/gwt-mobile-webkit/downloads/list

选择gwt-html5-geolocation-xxx.tar.gz。解压缩，将其中的.jar文件部署到gwt项目的classpath下。

在模块的配置文件中，增加：

<inherits name="com.google.code.gwt.geolocation.Html5Geolocation" />

代码：

public void onModuleLoad() {
    if (Geolocation.isSupported()) {
        Geolocation geo = Geolocation.getGeolocation();
        if (geo != null) {
            geo.getCurrentPosition(new PositionCallback() {

                @Override
                public void onFailure(PositionError error) {
                    Window.alert("error");
                }

                @Override
                public void onSuccess(Position position) {
                    Coordinates o = position.getCoords();
                    RootPanel.get().add(
                            new HTML("位置，纬度：" + o.getLatitude() + "，经度："
                                    + o.getLongitude()+"，高度："+o.getAltitude()));
                    RootPanel.get().add(
                            new HTML("精度："+o.getAccuracy()));
                }

            });
            RootPanel.get().add(new HTML("支持Geolocation，使用"+Geolocation.getProviderName()));
        }
    }else{
        RootPanel.get().add(new HTML("对不起，您的浏览器不支持HTML5 Geolocation API。"));
    }

 

看到的效果，类似这样：

目前测试的结果是：

• android不支持，看了文档，据说是2.0版本以后的支持，测试用的是1.5版本的g3；
• iphone 3g，支持，OS 3.0；
• chrome，支持；
• firefox，支持；
• opera，不支持；
• safari，不支持。

   发送文章为PDF