1

我从我的一位同事那里找到了一个脚本。

我想要的只是从谷歌地图中自动完成美国和加拿大的位置。我看到我无法在其中添加多个国家/地区，componentRestrictions但是，如果您知道一种解决方法，那也会有很大帮助。

我在这里的脚本是：

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
    <style>
      body {
        font-family: sans-serif;
        font-size: 14px;
      }
      #map_canvas {
        height: 400px;
        width: 600px;
        margin-top: 0.6em;
      }
      input {
        border: 1px solid  rgba(0, 0, 0, 0.5);
      }
      input.notfound {
        border: 2px solid  rgba(255, 0, 0, 0.4);
      }
    </style>
    <script>
      function initialize() {
        var input = document.getElementById('searchTextField');
        var options = {
            types: ['(cities)'],
            componentRestrictions: {country: 'us'}
        };

        var autocomplete = new google.maps.places.Autocomplete(input, options);

        // 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>
  </head>
  <body>
    <div>
      <input id="searchTextField" type="text" size="50">
      <input type="radio" name="type" id="changetype-all" checked="checked">
      <label for="changetype-all">All</label>

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

      <input type="radio" name="type" id="changetype-geocode">
      <label for="changetype-geocode">Geocodes</lable>
    </div>
  </body>
</html>

这个脚本有效！但是，问题是，我不想要单选按钮，当我删除它们和相关脚本时，它完全停止工作！

我只想自动完成，周围没有其他任何东西。同样，这个脚本不是我写的。

编辑：

我的问题与https://gis.stackexchange.com/questions/31916/i-am-trying-to-put-autocomplete-of-google-api-v3-for-places-but-giving-some-err有关 谷歌给了我……虽然那个小伙子也在苦苦挣扎:(

4

4 回答 4

2

2017 年 1 月，Maps JavaScript API 3.27 版中引入了多个国家/地区过滤器：

您现在可以将自动完成预测限制为仅来自多个国家/地区的显示。您可以通过在 AutocompleteOptions 的 componentRestrictions 字段中指定最多 5 个国家来做到这一点。

https://developers.google.com/maps/documentation/javascript/releases

https://developers.google.com/maps/documentation/javascript/reference#ComponentRestrictions

看看这个例子： http: //jsbin.com/ramgi/edit ?html,output

    var G = google.maps;
    var chicago = new G.LatLng(41.850033, -87.6500523);
    var infowindow = new G.InfoWindow();
    var marker;

      function initialize() {
      var mapOptions = {
          center: chicago,
          zoom: 5,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'),
          mapOptions);
        marker = new G.Marker({map:map});

        var input = document.getElementById('searchTextField');
        var options = {
            types: ['(cities)'],
            componentRestrictions: {country: ['us', 'ca']}
        };

        var autocomplete = new google.maps.places.Autocomplete(input, options);

        google.maps.event.addListener(autocomplete, 'place_changed', function() {
          infowindow.close();
          var place = autocomplete.getPlace();
          if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
          } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);  // Why 17? Because it looks good.
          }

          var image = new google.maps.MarkerImage(
              place.icon,
              new google.maps.Size(71, 71),
              new google.maps.Point(0, 0),
              new google.maps.Point(17, 34),
              new google.maps.Size(35, 35));
          marker.setIcon(image);
          marker.setPosition(place.geometry.location);

          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);
        });
        }

      google.maps.event.addDomListener(window, 'load', initialize);
body {
        font-family: sans-serif;
        font-size: 14px;
      }
      #map_canvas {
        height: 400px;
        width: 600px;
        margin-top: 0.6em;
      }
      input {
        border: 1px solid  rgba(0, 0, 0, 0.5);
      }
      input.notfound {
        border: 2px solid  rgba(255, 0, 0, 0.4);
      }
<div>
      <input id="searchTextField" type="text" size="50">
      <div id="map_canvas"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&libraries=places"></script>

于 2017-03-08T17:49:50.637 回答
1

我所要做的就是一一删除行...我注意到，我删除了多余的 } 直到 Chrome 控制台告诉我！简单的解决方案。

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
    <style>
      body {
        font-family: sans-serif;
        font-size: 14px;
      }
      #map_canvas {
        height: 400px;
        width: 600px;
        margin-top: 0.6em;
      }
      input {
        border: 1px solid  rgba(0, 0, 0, 0.5);
      }
      input.notfound {
        border: 2px solid  rgba(255, 0, 0, 0.4);
      }
    </style>
    <script>
      function initialize() {
        var input = document.getElementById('searchTextField');
        var options = {
            componentRestrictions: {country: 'us'}
        };
        var autocomplete = new google.maps.places.Autocomplete(input, options);
}

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
<form method = "POST">
    <div>
      <input id="searchTextField" type="text" size="50" name="location">
    </div>
<input type = "submit" />
  </body>
</html>
于 2012-10-24T09:46:01.597 回答
0

如果您不想要任何单选按钮，只需将它们替换为 ，如下所示：

<div name="type" id="changetype-all" checked="checked"></div>
<label for="changetype-all">All</label>

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

<div name="type" id="changetype-geocode"></div>
<label for="changetype-geocode">Geocodes</lable>
于 2012-10-24T08:39:03.720 回答
0

复制+粘贴服务（此处为现场演示。）：

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
    <style>
      body {
        font-family: sans-serif;
        font-size: 14px;
      }
      #map_canvas {
        height: 400px;
        width: 600px;
        margin-top: 0.6em;
      }
      input {
        border: 1px solid  rgba(0, 0, 0, 0.5);
      }
      input.notfound {
        border: 2px solid  rgba(255, 0, 0, 0.4);
      }
    </style>
    <script>
    var G = google.maps;
    var chicago = new G.LatLng(41.850033, -87.6500523);
    var infowindow = new G.InfoWindow();
    var marker;

      function initialize() {
      var mapOptions = {
          center: chicago,
          zoom: 5,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'),
          mapOptions);
        marker = new G.Marker({map:map});

        var input = document.getElementById('searchTextField');
        var options = {
            types: ['(cities)'],
            componentRestrictions: {country: 'us'}
        };

        var autocomplete = new google.maps.places.Autocomplete(input, options);

        google.maps.event.addListener(autocomplete, 'place_changed', function() {
          infowindow.close();
          var place = autocomplete.getPlace();
          if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
          } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);  // Why 17? Because it looks good.
          }

          var image = new google.maps.MarkerImage(
              place.icon,
              new google.maps.Size(71, 71),
              new google.maps.Point(0, 0),
              new google.maps.Point(17, 34),
              new google.maps.Size(35, 35));
          marker.setIcon(image);
          marker.setPosition(place.geometry.location);

          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);
        });
        }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div>
      <input id="searchTextField" type="text" size="50">
      <div id="map_canvas"></div>
    </div>
  </body>
</html>
于 2012-10-24T09:55:29.597 回答