Google maps 谷歌地图API，搜索自动完成不缩放

我一直在回顾和使用GoogleMapsAPI商店定位器示例，该示例使用了PlacesAPI。我添加了markercluster api，允许对1800个标记进行聚类

我现在的问题是如何修复我在添加MarkerCluster代码之前使用的搜索自动完成功能。在我添加代码之前，“搜索现有位置”文本框会将地图缩放并居中到我选择的位置

我想我需要将搜索代码放在初始化脚本中，但我不确定放在哪里

[以下搜索代码]

$('#search_ex_places').blur(function(){//once the user has selected an existing place


  var marker = 0;
  var place = $(this).val();
  //initialize values
  var exists = 0;
  var lat = 0; 
  var lng = 0;
  $('#saved_places option').each(function(index){ //loop through the save places
    var cur_place = $(this).data('place'); //current place description

    //if current place in the loop is equal to the selected place
    //then set the information to their respected fields
    if(cur_place == place){ 
      exists = 1;
      $('#place_id').val($(this).data('id'));
      lat = $(this).data('lat');
      lng = $(this).data('lng');
      $('#n_place').val($(this).data('place'));
      $('#n_description').val($(this).data('description'));

    alert('lat: ' + lat + ', lng: ' + lng ); // aris put this alert here to see where             lat/lng values are at

      // map.setCenter(new google.maps.LatLng(lat,lng));  //set map center to the coordinates of the location
     //  map.setZoom(17); //set a custom zoom level of 17 
      //$('#map_canvas').gmap('get','map').setOptions({'center':(25.86568260193,-80.19351196289)});


var datcenter = new google.maps.LatLng(lat, lng);
        var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 17,
      center: datcenter,
      mapTypeId: google.maps.MapTypeId.ROADMAP

});
 var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: $(this).data('place')
});


    }
  });

  if(exists == 0){//if the place doesn't exist then empty all the text fields and hidden fields
    $('input[type=text], input[type=hidden]').val('');

  }else{
    //set the coordinates of the selected place
    var position = new google.maps.LatLng(lat, lng);

    //set marker position
    marker.setMap(map);
    marker.setPosition(position);

    //set the center of the map
     map.setCenter(marker.getPosition());
     map.setZoom(17);


  }
});

[搜索代码结束]

在搜索代码上方，我有一个markercluster代码：

[代码开始]

<script type="text/javascript">

// var src = 'https://developers.google.com/maps/tutorials/kml/westcampus.kml';

// var src = 'http://urgentcarepro.com/map/us_states.kml';



  function initialize() {
    var center = new google.maps.LatLng(37.4419, -122.1419);

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });



var input = document.getElementById('search_new_places'); //get element to use as input for autocomplete
var autocomplete = new google.maps.places.Autocomplete(input); //set it as the input for autocomplete
autocomplete.bindTo('bounds', map); //bias the results to the maps viewport


    var markers = [];
    for (var i = 0; i < 1860; i++) {

    createMarker(i) ;
     }

     function createMarker(i) {

      var dataPhoto = data.photos[i];
      var latLng = new google.maps.LatLng(dataPhoto.latitude,
          dataPhoto.longitude);
      var marker = new google.maps.Marker({
        position: latLng,
        draggable: true, //make the marker draggable
        title: dataPhoto.photo_title , // title i guess
      });




 var contentString = '<div id="content" style="width:500px;">'+
  '<div id="siteNotice">'+
  '</div>'+
  '<h1 id="firstHeading" class="firstHeading">'+dataPhoto.photo_title+'</h1>'+
  '<div id="bodyContent">'+
  '<p><b>'+dataPhoto.photo_title+'</b>, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>'+
'<p>Visit website: <a href="#">'+
  'Click Here</a> '+
  '</p>'+
  '</div>'
  '</div>'; 

      var infowindow = new google.maps.InfoWindow({
content: contentString
});



google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});   


//executed when a place is selected from the search field
google.maps.event.addListener(autocomplete, 'place_changed', function(){

    //get information about the selected place in the autocomplete text field
    var place = autocomplete.getPlace(); 

    if (place.geometry.viewport){ //for places within the default view port   (continents, countries)
      map.fitBounds(place.geometry.viewport); //set map center to the coordinates of the location
    } else { //for places that are not on the default view port (cities, streets)
      map.setCenter(place.geometry.location);  //set map center to the coordinates of the location
      map.setZoom(17); //set a custom zoom level of 17
    }

    marker.setMap(map); //set the map to be used by the  marker
    marker.setPosition(place.geometry.location); //plot marker into the coordinates of the location 

});


      markers.push(marker);

    }
     var markerCluster = new MarkerClusterer(map, markers);


  }


  function loadKmlLayer(src, map) {
 var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
google.maps.event.addListener(kmlLayer, 'click', function(event) {
var content = event.featureData.description;
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
});
}



  google.maps.event.addDomListener(window, 'load', initialize);



</script>

//var src='1〕https://developers.google.com/maps/tutorials/kml/westcampus.kml';
//var src='1〕http://urgentcarepro.com/map/us_states.kml';
函数初始化（）{
var center=newgoogle.maps.LatLng（37.4419，-122.1419）；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：3，
中心:中心,，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var input=document.getElementById（'search_new_places'）；//获取要用作自动完成输入的元素
var autocomplete=new google.maps.places.autocomplete（输入）；//将其设置为autocomplete的输入
autocomplete.bindTo（'bounds'，map）；//将结果偏向“贴图”视口
var标记=[]；
对于（变量i=0；i<1860；i++）{
创建标记（i）；
}
函数createMarker（i）{
var dataPhoto=data.photos[i]；
var latLng=新的google.maps.latLng（dataPhoto.latitude，
经度）；
var marker=new google.maps.marker({
位置：latLng，
draggable:true，//使标记可拖动
title:dataPhoto.photo\u title，//我猜是title
});
var contentString=''+
''+
''+
''+数据照片.照片标题+''+
''+
“”+数据照片。照片标题+”，Lorem ipsum Door sit amet，Adipising Elite，sed do eiusmod Temporal Indidut ut Labor and dolore magna aliqua。但是，在最小限度的情况下，ullamco Laboratoris nisi and aliquip ex ea commodo consequat。在一次交易中，两人或两人因失业而被解雇不可剥夺权利。除非偶尔出于谨慎，否则不应将动物作为劳动来承担责任
'+
“访问网站：”+
“
”+
''
''; 
var infowindow=new google.maps.infowindow({
内容：contentString
});
google.maps.event.addListener（标记'click'，函数（）{
信息窗口。打开（地图、标记）；
});   
//从搜索字段中选择位置时执行
google.maps.event.addListener（自动完成，'place\u changed'，函数（）{
//在“自动完成”文本字段中获取有关选定位置的信息
var place=autocomplete.getPlace（）；
if（place.geometry.viewport）{//用于默认视口中的位置（大陆、国家）
map.fitBounds（place.geometry.viewport）；//将地图中心设置为该位置的坐标
}else{//用于不在默认视口上的位置（城市、街道）
map.setCenter（place.geometry.location）；//将地图中心设置为该位置的坐标
map.setZoom（17）；//将自定义缩放级别设置为17
}
marker.setMap（map）；//设置标记要使用的映射
marker.setPosition（place.geometry.location）；//将标记打印到位置的坐标中
});
标记器。推（标记器）；
}
var markerCluster=新的MarkerClusterer（地图、标记）；
}
函数loadKmlayer（src，map）{
var kmlLayer=new google.maps.kmlLayer（src{
suppressInfoWindows：对，
不正确：错误，
地图：地图
});
google.maps.event.addListener（kmlLayer，'click'，函数（event）{
var content=event.featureData.description；
var testional=document.getElementById（'capture'）；
testional.innerHTML=内容；
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

---

[代码结束]

最简单的修复方法是使映射变量全局化。然后在搜索函数中使用全局变量

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 17,
  center: datcenter,
  mapTypeId: google.maps.MapTypeId.ROADMAP

});

到

或者去掉那些线

function initialize() {
  var center = new google.maps.LatLng(37.4419, -122.1419);

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
// rest of your initialize code

致：

---

最简单的解决方法是使映射变量全局化。然后在搜索函数中使用全局变量

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 17,
  center: datcenter,
  mapTypeId: google.maps.MapTypeId.ROADMAP

});

到

或者去掉那些线

function initialize() {
  var center = new google.maps.LatLng(37.4419, -122.1419);

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
// rest of your initialize code

致：

---

非常感谢你的帮助@geocodezip您的建议对我帮助很大，因为它们帮助我找到了导致我遇到的特定问题的bug。实际上，我必须在我的“初始化”函数中包含自动完成javascript代码片段，才能使缩放重新开始工作。但是，现在在用户事件之间加载和重新加载映射需要很长时间。有没有关于如何加快速度的想法。再次感谢！非常感谢你的帮助@geocodezip您的建议对我帮助很大，因为它们帮助我找到了导致我遇到的特定问题的bug。实际上，我必须在我的“初始化”函数中包含自动完成javascript代码片段，才能使缩放重新开始工作。但是，现在在用户事件之间加载和重新加载映射需要很长时间。有没有关于如何加快速度的想法。再次感谢！