【问题标题】:Center to the current position in a Primefaces gmap以 Primefaces gmap 中的当前位置为中心
【发布时间】:2013-10-08 09:01:56
【问题描述】:

是否可以使用 Primefaces 的 gmap 将谷歌地图以客户当前位置为中心?

我使用 JSF、JPA 和 primefaces 开发公共卫生信息系统。具有GPS功能的移动设备的外勤人员需要记录位置,以便将数据记录到数据库中进行分析。

我们可以用 Primefaces gmap 做到这一点吗?

如果不可能,我可以使用哪些其他工具和技术来实现此功能?

【问题讨论】:

    标签: google-maps jsf primefaces


    【解决方案1】:

    是的,这很有可能,但这又取决于客户端的网络浏览器 supports HTML5 navigator.geolocation 和/或您是否使用 Google Loader API 作为后备。

    您可以通过widgetVarName.getMap() 获取对具体GMap JavaScript 对象的引用,其中widgetVarName<p:gmap widgetVar>。然后你可以像setCenter()这样的常用方法在它上面使用GMap JavaScript API方法。

    这是一个启动示例,前提是您希望通过 HTML5 navigator.geolocation 检查地理位置并使用 Google Loader API 作为后备。

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    
    <p:gmap widgetVar="w_gmap" type="HYBRID" center="41.381542, 2.122893" zoom="15" style="width:600px;height:400px" />       
    
    <script type="text/javascript">
        if (navigator.geolocation) {
            checkGeolocationByHTML5();
        } else {
            checkGeolocationByLoaderAPI(); // HTML5 not supported! Fall back to Loader API.
        }
    
        function checkGeolocationByHTML5() {
            navigator.geolocation.getCurrentPosition(function(position) {
                setMapCenter(position.coords.latitude, position.coords.longitude);
            }, function() {
                checkGeolocationByLoaderAPI(); // Error! Fall back to Loader API.
            });
        }
    
        function checkGeolocationByLoaderAPI() {
            if (google.loader.ClientLocation) {
                setMapCenter(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude);
            } else {
                // Unsupported! Show error/warning?
            }
        }
    
        function setMapCenter(latitude, longitude) {
            w_gmap.getMap().setCenter(new google.maps.LatLng(latitude, longitude));
        }
    </script>
    

    注意:41.381542, 2.122893 的初始中心位置是从 PrimeFaces showcase 复制粘贴的,我认为它代表了他们最喜欢的俱乐部的足球场 :) 您可以随意将其更改为其他任何内容,例如您自己公司的位置。

    另请注意,出于安全原因,一般网络浏览器会要求最终用户确认以共享位置。另请参阅 Google Chrome documentationMozilla Firefox documentation 关于该主题。您不能关闭此部分。最终用户必须明确地接受请求。如果最终用户不允许,它将停留在初始中心位置。

    【讨论】:

    • 对于现在正在阅读本文的任何人,似乎(除非我错了)现在应该以PF('w_gmap').getMap().setCenter(new google.maps.LatLng(latitude, longitude)); 访问它
    • 什么是 PF ?我得到 getMap() is undefined ..任何线索?
    • 我正在运行 primeface 3.5。知道我应该包括什么吗?
    猜你喜欢
    • 1970-01-01
    • 2014-05-20
    • 2011-03-01
    • 2016-05-14
    • 1970-01-01
    • 2012-10-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多