JSF .xhtml 页面中的 Google 地址自动完成功能 - 任何示例? [复制]

Posted

技术标签:

【中文标题】JSF .xhtml 页面中的 Google 地址自动完成功能 - 任何示例? [复制]【英文标题】:Google address autocomplete in JSF .xhtml page - any examples? [duplicate] 【发布时间】:2012-11-02 04:11:43 【问题描述】:

我正在尝试在我的 JSF 应用程序的页面上使用 google 自动完成功能为地址输入添加一个文本字段,但运气不佳。

我在 *** 中查看了以下示例: Google maps Places API V3 autocomplete - select first option on enter 和Adding autocomplete to google geocoder 以及Places autocomplete example 的示例,以了解我需要做什么。

但是,所有这些示例都表明我需要通过插入以下内容来包含 Google 地方库:

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>

但是当我尝试将其添加到我的其他参考对象时,我收到以下错误:

Error Traced[line: 18] 对实体“库”的引用必须以“;”结尾分隔符。

所以我从一开始就死了。我有另一个没有错误的 googleapi 参考:

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

所以我不明白为什么会出现这个错误。

我对 xe 示例中的实现还有其他几个问题,但现在,我无法通过添加对 google 地方库的引用。

首先,有谁知道如何添加 google api 引用而不出现上述错误?

第二,有谁知道我在哪里可以找到一个使用 PrimeFaces 组件或最好是 PrimeFaces 组件将地址自动完成功能实际添加到 JSF 应用程序的示例?

谢谢。

【问题讨论】:

对于和号部分,将其替换为“&” 即使这个问题被标记为重复,谷歌搜索还是首先引导我找到这个问题和答案。在看到上面发布的其他/原始问题后,我才知道它。好问题,谢谢! 【参考方案1】:

您的标签应如下所示:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&amp;sensor=true&amp;key=#googleAPIKey"></script>

注意 key 参数 - 它是可选的,但建议从 Google API 控制台获取您的 API 密钥。

请参阅 https://github.com/rootkit007/google-places-facelet 了解 Google Places 自动完成 JSF 组件

【讨论】:

我记得您在设计 Google 地方信息自动完成 JSF 组件时,PrimeFaces forum topic 中的 sharing source code。【参考方案2】:

对于 Google 地图自动完成示例,您可以使用我的。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core">

<h:head>

    <title>Places Autocomplete</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"></meta>
    <meta charset="utf-8"></meta>
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"></link>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"></script>

    <style>
        html, body 
            height: 100%;
            margin: 0;
            padding: 0;
        

        #map-canvas, #map_canvas 
            height: 100%;
        

        @media print 
            html, body 
                height: auto;
            

            #map_canvas 
                height: 650px;
            
        

        #panel 
            position: absolute;
            top: 5px;
            left: 50%;
            margin-left: -180px;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
        

        input 
            border: 1px solid  rgba(0, 0, 0, 0.5);
        
        input.notfound 
            border: 2px solid  rgba(255, 0, 0, 0.4);
        
    </style>

    <script>
    // <![CDATA[
        function initialize() 
          var mapOptions = 
            center: new google.maps.LatLng(-33.8688, 151.2195),
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          ;
          var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

          var input = /** @type HTMLInputElement */(document.getElementById('searchTextField'));
          var autocomplete = new google.maps.places.Autocomplete(input);

          autocomplete.bindTo('bounds', map);

          var infowindow = new google.maps.InfoWindow();
          var marker = new google.maps.Marker(
            map: map
          );

          google.maps.event.addListener(autocomplete, 'place_changed', function() 
            infowindow.close();
            marker.setVisible(false);
            input.className = '';
            var place = autocomplete.getPlace();
            if (!place.geometry) 
              // Inform the user that the place was not found and return.
              input.className = 'notfound';
              return;
            

            // If the place has a geometry, then present it on a map.
            if (place.geometry.viewport) 
              map.fitBounds(place.geometry.viewport);
             else 
              map.setCenter(place.geometry.location);
              map.setZoom(17);  // Why 17? Because it looks good.
            
            marker.setIcon(/** @type google.maps.Icon */(
              url: place.icon,
              size: new google.maps.Size(71, 71),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(17, 34),
              scaledSize: new google.maps.Size(35, 35)
            ));
            marker.setPosition(place.geometry.location);
            marker.setVisible(true);

            var address = '';
            if (place.address_components) 
              address = [
                (place.address_components[0] && place.address_components[0].short_name || ''),
                (place.address_components[1] && place.address_components[1].short_name || ''),
                (place.address_components[2] && place.address_components[2].short_name || '')
              ].join(' ');
            

            infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
            infowindow.open(map, marker);
          );

          // Sets a listener on a radio button to change the filter type on Places
          // Autocomplete.
          function setupClickListener(id, types) 
            var radioButton = document.getElementById(id);
            google.maps.event.addDomListener(radioButton, 'click', function() 
              autocomplete.setTypes(types);
            );
          

          setupClickListener('changetype-all', []);
          setupClickListener('changetype-establishment', ['establishment']);
          setupClickListener('changetype-geocode', ['geocode']);
        

        google.maps.event.addDomListener(window, 'load', initialize);
    // ]]>
    </script>
</h:head>

<h:body>
    <div id="panel" style="margin-left: -260px">
      <input id="searchTextField" type="text" size="50"></input>
      <input type="radio" name="type" id="changetype-all" checked="checked"></input>
      <label for="changetype-all">All</label>

      <input type="radio" name="type" id="changetype-establishment"></input>
      <label for="changetype-establishment">Establishments</label>

      <input type="radio" name="type" id="changetype-geocode"></input>
      <label for="changetype-geocode">Geocodes</label>
    </div>
    <div id="map-canvas"></div>

</h:body>
</html>

【讨论】:

以上是关于JSF .xhtml 页面中的 Google 地址自动完成功能 - 任何示例? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

为啥JSF点击xhtml页面3次

如何在 JSF 中实现登录过滤器?

如何使用JSF和Javascript在下拉列表选择中动态更新Google Region Chart数据

JSF 2.0在bean(或页面?)之间传递数据

配置到jsf中的错误页面时出错?

JSF/Primefaces 如何将另一个域中的 .xhtml 包含到您的 .xhtml 中