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

INsearchLocationsNear()次を追加

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