我正在使用 Google Store Locator 并设置了一个成功的示例，它在同一页面上显示结果（标准设置与地图上方或左侧的搜索栏）。我正在使用 PHP/MySQL 示例并按照那里的说明进行操作：
https://developers.google.com/maps/articles/phpsqlsearch_v3
它工作正常，但现在我想把它分成两页。基本上第一页会有一个搜索表单，然后第二页会显示结果。我计划使用 GET 变量，然后将其作为 PHP 变量传递到现有的 Javascript 中。
我看了一下这篇文章，看到有人在做与我类似的事情，但没有指向他们的源代码的链接，而且看起来他们可能使用了旧版本的商店定位器，因为 JS 文件名是'不匹配，等等。这是一个好的开始，这与我一直在尝试使用的方法相同（此时未成功）：
我在这里设置了我的示例：
http://miller-media.com/sites/newmaptest/results-test.php?zip_code=94546&radius=200
如果您查看原始 Javascript，您将看到在该页面上运行的所有功能（您也可以在该页面的源代码中看到它们）。我基本上需要更改当有人单击原始页面上的提交按钮时调用的函数。这次我需要在页面加载时运行这些功能，因为它在新页面上。在点击时运行的原始函数如下所示（顺便说一下，body 元素有一个 onload="load()" 作为属性，所以这就是一切开始的地方）：
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(40, -100),
zoom: 4,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
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');
}
};
document.onload = searchLocations();
}
function searchLocations() {
var address = document.getElementById("addressInput").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function(results, status) {
console.log('test');
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("option");
option.value = "none";
option.innerHTML = "See all results:";
locationSelect.appendChild(option);
}
function searchLocationsNear(center) {
clearLocations();
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'test.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 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');
};
});
}
显然，需要编辑的行是在有人提交表单时使用 Javascript 从页面本身提取值的行。我改变了这一行：
var address = document.getElementById("addressInput").value;
至
var address = <?php echo $zip_code; ?>;
从 GET 变量声明变量后。然后我改变了这一行：
var radius = document.getElementById('radiusSelect').value;
至
var radius = <?php echo $radius; ?>;
声明该变量后。当我查看源代码时，它看起来很好，因此它似乎可以正常工作。然后，我尝试通过在代码的不同部分打印到控制台来进行调试，看起来代码挂起的位置就在这一行：
geocoder.geocode({address: address}, function(results, status) {
它不运行该功能。当我在此行之前打印到控制台时，它很好，之后它不打印。所以由于某种原因，该功能不起作用。当我将“地理编码器”写到控制台之前，它会返回：
Yg {geocode: function}
我想一旦我弄清楚是什么导致它挂断，我就可以很好地调试。关于为什么 geocode() 函数无法运行的任何想法？谢谢！