javascript - 将 Google map 搜索结果(商店定位器)显示为无序列表，？

Question

我正在尝试根据本教程构建一个商店定位器:

https://developers.google.com/maps/articles/phpsqlsearch_v3

到目前为止一切正常，但我试图将搜索结果显示为可点击列表，而不是下拉菜单。我已经更改了 javascript，以便它打印出一个列表，但我似乎无法使其可单击，以便当用户单击其中一个结果时，相关标记会显示在 map 上。如果我使用下拉选项，标记会正确显示。

搜索前的 HTML:

<label for="addressInput">Enter address or postcode
<input type="text" id="addressInput" size="10">
</label>

<select id="radiusSelect">
<option value="25" selected="">25mi</option>
<option value="100">100mi</option>
<option value="200">200mi</option>
</select>

<input type="button" class="search-locations" value="Search">

<div><ul id="locationSelect" style="width:100%;visibility:hidden"></ul></div>

搜索后的 HTML:

<div>
<ul id="locationSelect" style="width: 100%; visibility: visible;">
<ul>See all results:</ul>
<li value="0">Result 1(0.8)</li>
<li value="1">Result 2(1.2)</li>
<li value="2">Result 3(2.1)</li>
<li value="3">Result 4(2.3)</li>
<li value="4">Result 5(3.1)</li>
<li value="5">Result 6(3.2)</li>
<li value="7">Result 7(4.1)</li>
</ul>
</div>

Javascript/Jquery

$(document).ready(function() {

$( ".search-locations" ).click(function() {
    searchLocations();
});

var map;
var markers = [];
var infoWindow;
var locationSelect;

function load_lab_map() {
  map = new google.maps.Map(document.getElementById("lab-map"), {
    center: new google.maps.LatLng(55.363259, -3.4433238),
    zoom: 5,
    mapTypeId: 'roadmap',
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
  });
  infoWindow = new google.maps.InfoWindow();

/**
* The google.maps.event.addListener() event waits for
* the creation of the infowindow HTML structure 'domready'
* and before the opening of the infowindow defined styles
* are applied.
*/
google.maps.event.addListener(infoWindow, 'domready', function() {

// Reference to the DIV which receives the contents of the infowindow using jQuery
var iwOuter = $('.gm-style-iw');

/* The DIV we want to change is above the .gm-style-iw DIV.
* So, we use jQuery and create a iwBackground variable,
* and took advantage of the existing reference to .gm-style-iw for the previous DIV with .prev().
*/
var iwBackground = iwOuter.prev();

// Remove the background shadow DIV
iwBackground.children(':nth-child(2)').css({'display' : 'none'});

// Remove the white background DIV
iwBackground.children(':nth-child(4)').css({'display' : 'none'});

// Moves the infowindow 115px to the right.
iwOuter.parent().parent().css({left: '0px'});

// Taking advantage of the already established reference to
// div .gm-style-iw with iwOuter variable.
// You must set a new variable iwCloseBtn.
// Using the .next() method of JQuery you reference the following div to     .gm-style-iw.
// Is this div that groups the close button elements.
var iwCloseBtn = iwOuter.next();

// Apply the desired effect to the close button
iwCloseBtn.css({
opacity: '1', // by default the close button has an opacity of 0.7
right: '38px', top: '3px', // button repositioning
border: '7px solid #824c97', // increasing button border and new color
'border-radius': '13px', // circular effect
'box-shadow': '0 0 5px #3990B9' // 3D effect to highlight the button
 });

// The API automatically applies 0.7 opacity to the button after the  mouseout event.
// This function reverses this event to the desired value.
iwCloseBtn.mouseout(function(){
$(this).css({opacity: '1'});
});

});

  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 geocoder = new google.maps.Geocoder();
 geocoder.geocode({address: address}, function(results, status) {
   if (status == google.maps.GeocoderStatus.OK) {
    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("ul");
 option.value = "none";
 option.innerHTML = "See all results:";
 locationSelect.appendChild(option);
}

function searchLocationsNear(center) {
 clearLocations();

 var radius = document.getElementById('radiusSelect').value;
 var searchUrl = '/ajax/lab_map.php?lat=' + center.lat() + '&lng=' +  center.lng() + '&radius=' + radius;
 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 OrganizationName = markerNodes[i].getAttribute("organization");
     var address = markerNodes[i].getAttribute("address_1");
     var Department = markerNodes[i].getAttribute("department");
     var Tel = markerNodes[i].getAttribute("tel");
     var Fax = markerNodes[i].getAttribute("fax");
     var Email = markerNodes[i].getAttribute("email");
     var Comments = markerNodes[i].getAttribute("summary");
     var BMS = markerNodes[i].getAttribute("bms");
     var AP = markerNodes[i].getAttribute("ap");
     var Consultant = markerNodes[i].getAttribute("consultant");
     var Email = markerNodes[i].getAttribute("email");
     var distance = parseFloat(markerNodes[i].getAttribute("distance"));
     var latlng = new google.maps.LatLng(
          parseFloat(markerNodes[i].getAttribute("lat")),
          parseFloat(markerNodes[i].getAttribute("lng")));

     createOption(OrganizationName, distance, i);
     createMarker(latlng, OrganizationName, address, Department, Tel, Fax, Email, Comments, BMS, AP, Consultant, Email);
     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, OrganizationName, address, Department, Tel, Fax, Email, Comments, BMS, AP, Consultant, Email) {
  var html = '<div id="info_container"><div class="info-title">' + OrganizationName + '</div><div class="iw-content">'
    + Department + "<br/>" + address + "<br/><b>Tel: </b>" + Tel + "<br/><b>Fax: </b>" + Fax + "<br/><b>Email: </b>" + Email + "<br/>" + Comments + "<br/><b>BMS: </b>"
    + BMS + "<br/><b>AP: </b>" + AP + "<br/><b>Consultant: </b>" + Consultant + '</div></div>';
  var iconBase = '/img/icon/';
  var marker = new google.maps.Marker({
    map: map,
    position: latlng,
    draggable: true,
    visible: true,
    icon: iconBase + 'lab-icon.png'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
  markers.push(marker);
}

function createOption(OrganizationName, distance, num) {
  var option = document.createElement("li");
  option.value = num;
  option.innerHTML = OrganizationName + "(" + distance.toFixed(1) + ")";
  locationSelect.appendChild(option);
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request.responseText, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function parseXml(str) {
  if (window.ActiveXObject) {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  } else if (window.DOMParser) {
    return (new DOMParser).parseFromString(str, 'text/xml');
  }
}

function doNothing() {}

load_lab_map();

 });

Answer 1

使用 jquery 和委托(delegate)事件:

$('#locationSelect').on("click", "li", function() {
    var markerNum = $(this).val();
    if (markerNum != "none"){
          google.maps.event.trigger(markers[markerNum], 'click');
    }
});