我正在尝试根据本教程构建商店定位器：
https://developers.google.com/maps/articles/phpsqlsearch_v3
到目前为止一切正常，但我试图将搜索结果显示为可点击列表，而不是下拉菜单。我已经更改了javascript，因此它打印出一个列表，但我似乎无法点击它，以便当用户点击其中一个结果时，相关标记会显示在地图上。如果我使用下拉选项，标记会正确显示。
搜索前的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();
});
答案 0 :(得分：1)
使用jquery和delegueted事件：
$('#locationSelect').on("click", "li", function() {
var markerNum = $(this).val();
if (markerNum != "none"){
google.maps.event.trigger(markers[markerNum], 'click');
}
});