4

我正在尝试在我的 JSF 应用程序的页面上使用谷歌自动完成添加地址输入的文本字段，但运气不佳。

我在 StackOverflow 中查看了以下示例： 谷歌地图 Places API V3 自动完成 - 在输入时选择第一个选项 并将自动完成添加到谷歌地理编码器 和地方自动完成示例中的示例，以了解我需要做什么。

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

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

但是当我尝试将它与我的其他引用添加时，我收到以下错误：

错误跟踪[行：18] 对实体“库”的引用必须以“;”结尾 分隔符。

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

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

所以我不知道为什么会出现这个错误。

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

首先，有谁知道如何在不出现上述错误的情况下添加 google api 参考？

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

谢谢。

4

2 回答 2

8

您的标签应类似于：

<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 密钥。

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

于 2013-02-01T18:38:29.887 回答
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>
于 2013-05-05T12:43:54.637 回答