GMaps自动完成 - 如何冻结地图上的交流结果

Question

我使用以下 GMaps 代码进行自动完成。在输入字段中输入文本后，我通常会收到新的 ac-result。 (marker, info_windows, geo-infomations) 当我输入另一个文本时，我收到一个新的标记，旧的标记被删除。 当我提出新请求时，如何使用地图上的旧信息窗口“冻结”旧标记？非常感谢

//自动完成

enter code here//Autocomplete

var acOptions = {
  componentRestrictions: {country: 'de'}

};
var autocomplete = 
new google.maps.places.Autocomplete(document.getElementById('autocomplete'),acOptions);
autocomplete.bindTo('bounds',map);
var ac_iw = new google.maps.InfoWindow();

var ac_image = 
  new google.maps.MarkerImage('http://maps.google.com/mapfiles/kml/pal3/icon55.png',
   new google.maps.Size(32,32),
   new google.maps.Point(0,0),
   new google.maps.Point(0,32));

var ac_shadow = 
  new google.maps.MarkerImage('http://maps.google.com/mapfiles/kml/pal3/icon55s.png',
   new google.maps.Size(45,35),
   new google.maps.Point(0,0),
   new google.maps.Point(0,32));


var ac_marker = new google.maps.Marker({
   map: map,
   icon: ac_image,
   shadow: ac_shadow

 });

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

 ac_marker.setPosition(place.geometry.location);
 ac_iw.setContent('<strong>' + place.name + 
    '</strong><br/>' + place.formatted_address +
 '<br/>tel.: ' + place.formatted_phone_number);
   ac_iw.open(map,ac_marker);
  google.maps.event.addListener(ac_marker,'click',function(){
    ac_iw.open(map,ac_marker);
  });

  });

   }

Answer 1

你只需要

• 将标记创建代码移动到自动完成“place_changed”处理程序中，以便为每个自动完成创建一个新标记
• 将 ac_iw.setContent 代码移动到 ac_marker, 'click' 处理程序中，以便在每次单击标记时重新填充 infoWindow。
• 避免使用现在已弃用的 .markerImage()

所以，在大多数情况下，这只是一个洗牌的问题。

var acOptions = {
  componentRestrictions: {country: 'de'}
};
var autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), acOptions);
autocomplete.bindTo('bounds', map);

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

var marker_options = {
    map: map,
    icon: {
        url: 'http://maps.google.com/mapfiles/kml/pal3/icon55.png',
        size: new google.maps.Size(32,32),
        origin: new google.maps.Point(0,0),
        anchor: new google.maps.Point(0,32)
    },
    shadow: {
        url: 'http://maps.google.com/mapfiles/kml/pal3/icon55s.png',
        size: new google.maps.Size(45,35),
        origin: new google.maps.Point(0,0),
        anchor: new google.maps.Point(0,32)
    }
};

google.maps.event.addListener(autocomplete, 'place_changed', function() {
    ac_iw.close();
    var place = autocomplete.getPlace();
    if(place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
    } else {
        map.setCenter(place.geometry.location);
        map.setZoom(10);
    }
    var ac_marker = new google.maps.Marker(marker_options);
    ac_marker.setPosition(place.geometry.location);
    google.maps.event.addListener(ac_marker, 'click', function() {
        ac_iw.setContent('<strong>' + place.name + '</strong><br/>' + place.formatted_address + '<br/>tel.: ' + place.formatted_phone_number);
        ac_iw.open(map, this);
    });
    google.maps.event.trigger(ac_marker, 'click');
});

未经测试 - 可能需要调试