需要防止下拉列表被一遍又一遍地添加

Need to prevent a dropdown list being added over and over

本文关键字:一遍 添加 下拉列表      更新时间:2023-09-26

我正在使用PHP MySql的谷歌地图代码,并根据他们的开发人员网站的代码,我已经得到了地图工作。但是,作为代码的一部分,他们在映射下添加了一个菜单(其中包含所有返回的选项)。问题是,当我执行另一个搜索时,我得到另一个添加的,而不是一个已经存在的,正在用新信息更新。我认为问题是与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);
}

createOption()完全按照它所说的那样创建一个新选项。如果要添加新搜索的结果(包括标记),则需要将这些结果添加到现有位置。

不是伪代码测试

GLOBAL var flag = 0;''Set to 0 for 1st Search

IN searchLocationsNear()添加以下

searchLocationsNear(center) {
    if(flag ==0){//1st Search
        clearLocations();
    }else{//Sugsequent Searches
        flag =1;
    }

问题是每次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');
   }
 });

}