居中于Primefaces gmap中的当前位置 [英] Center to the current position in a Primefaces gmap

问题描述

我可以使用JSF，JPA和primefaces来开发公共健康信息系统，它可以使用Primemap的gmap将谷歌地图集中在客户端当前位置上？ p> 具有GPS功能的移动设备的现场官员需要记录位置，以便将数据记录到数据库中进行分析。

我们可以使用Primefaces gmap吗？

如果不可能，我可以使用其他工具和技术来实现此功能吗？

解决方案

是的，这很有可能，但这又取决于客户端的webbrowser 是否支持 HTML5 navigator.geolocation 和/或您正在使用 Google Loader API 作为后备。

您可以通过 widgetVarName.getMap（）来获取对具体GMap JavaScript对象的引用，其中 widgetVarName 是< p：gmap widgetVar> 。然后，您可以按照常规方式使用 GMap JavaScript API 方法，例如 setCenter（）。

以下是一个启动示例，假设您想通过HTML5 navigator.geolocation 并使用Google Loader API作为后备。

 <脚本类型=text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=true>< / script> 
< script type =text / javascriptsrc =http://www.google.com/jsapi>< / script> 
 
  
< script type =text / javascript> 
 if（navigator.geolocation）{
 checkGeolocationByHTML5（）; 
} else {
 checkGeolocationByLoaderAPI（）; // HTML5不支持！回退到Loader API。 
 
 
函数checkGeolocationByHTML5（）{
 navigator.geolocation.getCurrentPosition（函数（位置）{
 setMapCenter（position.coords.latitude，position.coords.longitude ）; 
}，function（）{
 checkGeolocationByLoaderAPI（）; //错误！回到Loader API 
}）; 
} 
 
函数checkGeolocationByLoaderAPI（）{
 if（google.loader.ClientLocation）{
 setMapCenter（google.loader.ClientLocation.latitude，google.loader.ClientLocation 。经度）; 
} else {
 //不支持！显示错误/警告？ 
 
 
 
函数setMapCenter（纬度，经度）{
 w_gmap.getMap（）。setCenter（new google.maps.LatLng（纬度，经度）） ; 
} 
< / script> 
  

注意：的初始中心位置为41.381542,2.122893 从 PrimeFaces showcase 拷贝，我认为这代表了他们最喜欢的足球场俱乐部:)你可以自由地将其改变为其他任何东西，例如您的公司的位置。

另请注意，由于安全原因，平均webbrowser会要求最终用户确认以共享位置。另请参阅 Google Chrome文档和 Mozilla Firefox文档。您不能关闭此部分。最终用户确实要明确接受请求。如果最终用户不允许它，它会粘在最初的中心位置。

Is it possible to center the google map on clients current location using gmap of Primefaces?

I use JSF, JPA and primefaces to develop a public health information system. The field officers with mobile devices with GPS capability need to record the position so that the data is recorded to the database for analysis.

Can we do it with Primefaces gmap?

If it is not possible, what are the other tools and technologies I can use to achieve this functionality?

解决方案

Yes, that's quite possible, but that in turn also depends on whether the client's webbrowser supports HTML5 navigator.geolocation and/or you're using the Google Loader API as fallback.

You can grab a reference to the concrete GMap JavaScript object by widgetVarName.getMap() where widgetVarName is the <p:gmap widgetVar>. Then you can use the GMap JavaScript API methods on it the usual way such as setCenter().

Here's a kickoff example, provided that you want to check the geolocation by the HTML5 navigator.geolocation and use the Google Loader API as fallback.

<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>

Note: the initial center location of 41.381542, 2.122893 is copypasted from PrimeFaces showcase which I think represents the football stadium of their favourite club :) You're free to change it to anything else, e.g. the location of your own company.

Also note that the average webbrowser will for security reasons ask the enduser for confirmation to share the location. See also Google Chrome documentation and Mozilla Firefox documentation on the subject. You cannot turn off this part. The enduser has really to explicitly accept the request. If the enduser disallows it, it'll stick at the initial center location.

这篇关于居中于Primefaces gmap中的当前位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！