我遵循了 Google map 商店定位器教程 https://developers.google.com/maps/articles/phpsqlsearch_v3并构建了一个定位器,它获取用户的位置和半径,然后输出用户位置半径范围内的所有商店位置。在大多数情况下,它是有效的!
我的问题是,当我输入位置和半径并且该半径内没有商店时,我的定位器会将 map 居中放置在太平洋中部。
我尽力研究了其他商店定位器问题,但它们都是关于让定位器本身发挥作用的。如果我遗漏了什么,我深表歉意!另外,我是 javascript 的初学者,因此非常感谢代码背后的逻辑答案!
谢谢!
function searchLocationsNear(center) {
clearLocations();
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'storelocator_getXML.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 phone = markerNodes[i].getAttribute("phone");
var fax = markerNodes[i].getAttribute("fax");
var directions = markerNodes[i].getAttribute("directions");
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, address, distance, i);
createMarker(latlng, name, address, phone, fax, directions);
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');
};
});
}
最佳答案
经过多次试验和错误后,我突然灵机一动,找到了放置 if/else 语句的位置,以使我的 map 远离太平洋:
function searchLocationsNear(center) {
clearLocations();
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'storelocator_getXML.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker");
我在这里放了一个 if 语句。抓取选定半径内的所有标记位置后就说,如果有标记继续正常:
if(markerNodes.length>0){
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 phone = markerNodes[i].getAttribute("phone");
var fax = markerNodes[i].getAttribute("fax");
var directions = markerNodes[i].getAttribute("directions");
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, address, distance, i);
createMarker(latlng, name, address, phone, fax, directions);
bounds.extend(latlng);
}
map.fitBounds(bounds);
在这里,我把其他的放在半径内没有标记时要做什么:
} else {
alert('Sorry, there are no stores that close to your location. Try expanding your search radius.');
}
locationSelect.style.visibility = "visible";
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
google.maps.event.trigger(markers[markerNum], 'click');
};
});
}
关于javascript - 具有半径 : controlling map output when there are no stores in the user's radius 的 Google Maps API v3 商店定位器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9861880/