Question

我使用以下GMaps代码进行自动完成。通过在输入字段中输入文本按下返回，我通常会收到新的结果。（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_marker中移动ac_iw.setContent代码，“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');
});

未经测试 - 可能需要调试

GMaps自动完成 - 如何在地图上冻结交叉结果

1 个答案: