0

我正在使用带有 PHP MySql 的 Google Maps 代码，并且根据他们开发人员网站上的代码，我已经让地图工作了。然而，作为他们代码的一部分，他们在地图下添加了一个菜单（其中包含所有返回的选项）。问题是，当我进行另一次搜索时，我会添加另一个搜索，而不是已经使用新信息更新的搜索。我认为问题与 locationSelect 对象有关，我将不胜感激：

  //Variables that we need later
var map;
var markers = [];
var infoWindow;
var locationSelect;
var myLatLng = new google.maps.LatLng(40,-100);
var addmap = ('<div id="map" style="visibility:visible;"></div>');
var addLocationSelect = '</br><div id="locationSelectDiv"><select id="locationSelect"></select></div>';
var subject_text = "";
var subject_id = "";

 function load(myLatlng) {
    map = new google.maps.Map(document.getElementById("map"), {
    center: myLatLng,
    zoom: 3,
    mapTypeId: 'roadmap',
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
  }); 
  google.maps.event.trigger(map, 'resize');

  infoWindow = new google.maps.InfoWindow();
  locationSelect = document.getElementById("locationSelect");
  locationSelect.onchange = function() {
    var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
    if (markerNum != "none"){
      google.maps.event.trigger(markers[markerNum], 'click');
    }
  };
}

function searchLocations() {
     var address = document.getElementById("addressInput").value;
    var subject_text =  $('#search_subject>option:selected').text();
    var subject_id =  $('#search_subject>option:selected').val();
    console.log(address);
    console.log(subject_text);
    console.log(subject_id);

 var geocoder = new google.maps.Geocoder();
 geocoder.geocode({address: address}, function(results, status) {
   if (status == google.maps.GeocoderStatus.OK) {
      $('#container').replaceWith(addmap);

       $("#map").slideDown("4000", function(){    
                    $('#map').after(addLocationSelect);
                           load();
      searchLocationsNear(results[0].geometry.location);

     });
            } else {
     alert(address + ' not found');
   }
 });
}

function clearLocations() {
     infoWindow.close();
     for (var i = 0; i < markers.length; i++) {
       markers[i].setMap(null);
     }
     markers.length = 0;
 locationSelect.innerHTML = "";
     var option = document.createElement("option");
     option.value = "none";
     option.innerHTML = "See all results:";
     locationSelect.appendChild(option);

   }

function searchLocationsNear(center) {
     clearLocations();
     var searchUrl = 'findlocations.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=20';
     downloadUrl(searchUrl, function(data) {
       var xml = parseXml(data);
       var markerNodes = xml.documentElement.getElementsByTagName("marker");
       var bounds = new google.maps.LatLngBounds();
       for (var i = 0; i < markerNodes.length; i++) {
         var name = markerNodes[i].getAttribute("name");
         var address = markerNodes[i].getAttribute("address");
         var distance = parseFloat(markerNodes[i].getAttribute("distance"));
         var latlng = new google.maps.LatLng(
              parseFloat(markerNodes[i].getAttribute("lat")),
              parseFloat(markerNodes[i].getAttribute("lng")));
         createOption(name, distance, i); 
         createMarker(latlng, name, address);
         bounds.extend(latlng);
       }
       map.fitBounds(bounds);
      locationSelect.style.visibility = "visible";
       locationSelect.onchange = function() {
         var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
         google.maps.event.trigger(markers[markerNum], 'click');
       };
      });
    }
function createMarker(latlng, name, address) {
  var html = "<h3>" + name + "</h3><p>The biography will go here</p>";
  var marker = new google.maps.Marker({
    map: map,
    position: latlng
  });
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
  markers.push(marker);
}

function createOption(name, distance, num) {
   var option = document.createElement("option");
  option.value = num;
  option.innerHTML = name + " is " + distance.toFixed(1) + "miles away";
  locationSelect.appendChild(option);
}
4

2 回答 2

1

createOption()正如它所说的那样，它创建了一个新选项。如果您想添加新搜索的结果（包括标记），您需要将这些结果添加到现有位置。

伪代码未经测试

全球的var flag = 0;\\Set to 0 for 1st Search

在searchLocationsNear()添加以下

searchLocationsNear(center) {
    if(flag ==0){//1st Search
        clearLocations();
    }else{//Sugsequent Searches
        flag =1;
    }
于 2013-05-31T12:01:01.310 回答
0

问题是每次 searchLocations 函数返回时都会添加 locationSelect 选择下拉列表。我只是将它移到函数的顶部，每次输入提交按钮时都会添加新的，这只会提供一个包含地图结果的下拉列表。

function searchLocations() {
    $('#container').replaceWith(addmap);
    var address = document.getElementById("addressInput").value;
    alert(address);
    var subject_text =  $('#search_subject>option:selected').text();
    var subject_id =  $('#search_subject>option:selected').val();
    console.log(address);
    console.log(subject_text);
    console.log(subject_id);
 var geocoder = new google.maps.Geocoder();
 geocoder.geocode({address: address}, function(results, status) {
   if (status == google.maps.GeocoderStatus.OK) {
       $("#map").slideDown("4000", function(){                            
                           load();
      searchLocationsNear(results[0].geometry.location);

     });
            } else {
     alert(address + ' not found');
   }
 });

}

于 2013-05-31T17:31:51.500 回答