Google Maps API v3 - 在多个地理编码器请求后使用fitBounds [英] Google Maps API v3 - fitBounds after multiple geocoder requests
问题描述
我想要做的是使用AJAX和JSON加载一堆地址，找出每个地址的经度和纬度，在地图上放置标记，然后使用 fitBounds（）放大以便所有标记都可见。听起来很简单。
我已经得到了大部分压缩包，但是我的问题是 fitBounds（）部分。
基本上看来，发生的事情是在遍历每个地址并查找经度和纬度时，它似乎加载了 fitBounds（）循环下方的函数。
所以它调用 fitBounds（），但在 marker_bounds 数组呢。我会认为它会在到达 fitBounds（）函数之前完成循环，但我猜测 geocoder.geocode（）函数必须使它继续加载JavaScript的其余部分，同时确定经度和纬度。
我的代码如下：
var geocoder;
var map;
var marker_bounds = [];
var myOptions = {
zoom：12，
mapTypeId：google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map （document.getElementById（map_canvas），myOptions）;
$ .post（'addresses.php'，function（data）{
var next_filter ='';
for（var x = 0; x< data.addresses.length; x ++）{
geocoder.geocode（{'address'：data.addresses [x] .address}，function（results，status）{
if（status == google.maps.GeocoderStatus.OK）{
marker = new google.maps.Marker（{
map：map，
position：results [0 ] .geometry.location
））;
var latLng = new google.maps.LatLng（results [0] .geometry.location.lat（），results [0] .geometry。 location.lng（））;
marker_bounds.push（latLng）;
}
}）;
}
var latlngbounds =新的google.maps.LatLngBounds（）;
（var i = 0; i< marker_bounds.length; i ++）{
latlngbounds.extend（marker_bounds [i]）;
}
map.setC输入（latlngbounds.getCenter（））;
map.fitBounds（latlngbounds）;
}，'json'）;
是否有一个函数可以在所有地理编码完成后调用？
好的，这是我学到的东西。
$ b
- geocode方法进行异步调用，因此geocode方法所在的页面将在地理编码器完成查找地址期间完成。
- 您需要调用一个函数（
addressBounds），然后计算它已经进行了地理编码的地址数（address_count）。 b $ b - 每次调用
addressBounds函数时，检查是否查找了所有地址（if（total_addresses == address_count ）），然后运行fitBounds（）函数。 b我的最终代码
var geocoder;
var map;
var markerBounds = [];
var myOptions = {
zoom：4，
mapTypeId：google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map （document.getElementById（map_canvas），myOptions）;
google.maps.event.addListenerOnce（map，'idle'，function（）{
$ .post（'addresses.php'，function（data）{
var total_addresses = data.addresses.length;
var address_count = 0;
for（var x = 0; x
geocoder.geocode（{'address'：data.addresses [x] .address}，function（results，status）{
address_count ++;
if（status == google.maps.GeocoderStatus.OK）{
marker = new google.maps.Marker（{
map：map，
position：results [0] .geometry.location
$）b
$ b var infowindow = new google.maps.InfoWindow（）;
infowindow.setContent（address）;
google.maps.event.addListener（marker ，'click'，function（）{
in fowindow.open（map，marker）;
}）;
var myLatLng = new google.maps.LatLng（results [0] .geometry.location.lat（），results [0] .geometry.location.lng（））;
addressesBounds（total_addresses，address_count，myLatLng）;
}
}）;
}
}，'json'）;
}）;
函数addressesBounds（total_addresses，address_count，myLatLng）{
markerBounds.push（myLatLng）;
//确保只有在所有地址都经过geocoded
时才运行此函数if（total_addresses == address_count）{
var latlngbounds = new google.maps.LatLngBounds（） ;
for（var i = 0; i< markerBounds.length; i ++）{
latlngbounds.extend（markerBounds [i]）;
}
map.setCenter（latlngbounds.getCenter（））;
map.fitBounds（latlngbounds）;
}
}
What I want to do is load a bunch of addresses using AJAX and JSON, find out the latitude and longitude of each address, put markers on the map and then use fitBounds() to zoom in so that all markers are visible. Sounds simple.
I've got most of that down packed but my issue is the fitBounds() part.
Basically what seems to be occurring is while looping through each of the addresses and finding the latitude and longitude, it seems to load the fitBounds() function below the loop.
So it's calling fitBounds() but doesn't have anything in the marker_bounds array yet. I would have thought it would have finished looping before getting to the fitBounds() function but I guess the geocoder.geocode() function must cause it to continue loading the rest of the JavaScript while it determines a latitude and longitude.
My code is below:
var geocoder;
var map;
var marker_bounds = [];
var myOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
$.post('addresses.php', function(data) {
var next_filter = '';
for(var x=0;x<data.addresses.length;x++) {
geocoder.geocode( { 'address': data.addresses[x].address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
var latLng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
marker_bounds.push(latLng);
}
});
}
var latlngbounds = new google.maps.LatLngBounds();
for ( var i = 0; i < marker_bounds.length; i++ ) {
latlngbounds.extend(marker_bounds[i]);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
}, 'json');
Is there a function that I can call after all geocoding has been completed?
Ok, here's what I've learned.
- The geocode method makes an asynchonous call so the page that the geocode method is in will finish long before the geocoder is done looking up addresses during that process.
- You need to call a function (
addressBounds) after the geocode method is run and count how many addresses it has geocoded (address_count). - Each time the
addressBoundsfunction is called, check to see if all addresses have been looked up (if (total_addresses == address_count)), then run thefitBounds()function.
My final code
var geocoder;
var map;
var markerBounds = [];
var myOptions = {
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListenerOnce(map, 'idle', function(){
$.post('addresses.php', function(data) {
var total_addresses = data.addresses.length;
var address_count = 0;
for(var x=0;x<total_addresses;x++) {
geocoder.geocode( { 'address': data.addresses[x].address }, function(results, status) {
address_count++;
if (status == google.maps.GeocoderStatus.OK) {
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(address);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
var myLatLng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
addressesBounds(total_addresses, address_count, myLatLng);
}
});
}
}, 'json');
});
function addressesBounds(total_addresses, address_count, myLatLng) {
markerBounds.push(myLatLng);
// make sure you only run this function when all addresses have been geocoded
if (total_addresses == address_count) {
var latlngbounds = new google.maps.LatLngBounds();
for ( var i = 0; i < markerBounds.length; i++ ) {
latlngbounds.extend(markerBounds[i]);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
}
}
这篇关于Google Maps API v3 - 在多个地理编码器请求后使用fitBounds的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
