Google Maps API v3找不到自己的建议位置(具有自动补全功能) [英] Google Maps API v3 does not find it's own suggested location (with autocompletion)

问题描述

(由Google Maps Developer Direction建议在此处发布)

(It was suggested by Google Maps Developer Direction to post it here)

我正在为我的网站使用Google Maps API v3，这是地址: http://goo.gl/YuyPo 对不起，罗马尼亚语，但是很容易看到搜索字段和地图，这很普遍:) (或者，您可以从此处使用官方的Google Maps API v3自动完成示例:

I am using Google Maps API v3 for my website, this is the address: http://goo.gl/YuyPo Sorry for Romanian language, but it is easy to see the search field and the map, that is universal :) (or, you can use the official Google Maps API v3 autocompletion example from here: https://google-developers.appspot.com/maps/documentation/javascript/examples/places-autocomplete, it reacts the same)

效果很好，但是我搜索

Câmpulung Moldovenesc, Suceava, Romania

(完全像这样)自动完成工作，但是如果我单击自动完成的值(上面的一个)，它什么都不做.它应该转到搜索的&选择的地方.该位置有效，例如，您可以在Google Maps中找到它.

(exactly like this) the autocompetion works, but if I click the autocompleted value (the one above), it does nothing. It should go to the searched & selected place. The location is valid and you can find it in Google Maps for instance.

与

Cîmpulung Moldovenesc, Suceava, Romania

(在罗马尼亚语中，Câmpulung是正确的语言，但直到15年前大约是Cîmpulung，而î在单词中间变成了â

(in Romanian language Câmpulung is the correct one, but till aprox 15 years ago it was Cîmpulung, and î became â in the middle of words)

仅当我用i(Cimpulung Moldovenesc)拼写该搜索时，该搜索才会将我带到该镇.

That search gets me to that town only if I spell it with i (Cimpulung Moldovenesc).

最初，代码是我提供链接的那个示例中的代码(在我的示例中，代码仅出于搜索和自动补全的目的而针对其他需求进行了修改):

Originally, the code was the one from that example I provided the link (in my example the code is modified for other needs I have beside just searching and autocompletion):

Google Maps JavaScript API v3示例:地点自动完成

Google Maps JavaScript API v3 Example: Places Autocomplete

<style type="text/css">
  body {
    font-family: sans-serif;
    font-size: 14px;
  }
  #map_canvas {
    height: 400px;
    width: 600px;
    margin-top: 0.6em;
  }
</style>

<script type="text/javascript">
  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 = 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();
      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);
    });

    // 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>
<div id="map_canvas"></div>   </body> </html>

是否有解决方案，还是应该以某种方式提交错误报告?非常感谢！

Is there a solution for this or should I somehow file a bug report? Thanks a lot!

推荐答案

    var input = document.getElementById('searchTextFieldWhereMe');
    var autocomplete = new google.maps.places.Autocomplete(input,options);
    autocomplete.bindTo('bounds', this.map);

    var infowindow = new google.maps.InfoWindow();

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
           infowindow.close();
           var place = autocomplete.getPlace();
           if (place.geometry.viewport) {
              alfamap.map.fitBounds(place.geometry.viewport);
           } else {
             alfamap.map.setCenter(place.geometry.location);
             alfamap.map.setZoom(16);
           }

           alfamap.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(alfamap.map, marker);
         });        

为我工作

这篇关于Google Maps API v3找不到自己的建议位置(具有自动补全功能)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！