google.maps.Geocoder類(lèi)的geocode方法與google.maps.Map類(lèi)的fitBounds都是異步方法, 在頁(yè)面上添加google map的引用就可以使用這些類(lèi), 現(xiàn)在的一個(gè)問(wèn)題是我想頁(yè)面上所有map相關(guān)的數(shù)據(jù)加載完再進(jìn)步下一步操作該如何實(shí)現(xiàn)？

場(chǎng)景

頁(yè)面中有一個(gè)Select標(biāo)簽, 存放全國(guó)各城市的信息,

一個(gè)640px高度和寬度的正方型div, 用來(lái)加載地圖.

一個(gè)輸出按鈕

在select標(biāo)簽中選擇一個(gè)城市后, 用異步方式與服務(wù)器會(huì)話并取回這個(gè)城市所有的蘋(píng)果專(zhuān)賣(mài)店的地址, div中顯示被選中的城市并用Marker標(biāo)出所有的蘋(píng)果專(zhuān)賣(mài)店, 點(diǎn)擊輸入按鈕將適合的zoom level和地圖中心點(diǎn)坐標(biāo)傳回服務(wù)端生成報(bào)表再輸出到客戶端

?

理想操作

選擇一個(gè)城市

div中顯示對(duì)應(yīng)的城市并標(biāo)出所有蘋(píng)果專(zhuān)賣(mài)店

點(diǎn)擊輸出按輸出一張報(bào)表并內(nèi)嵌一個(gè)地圖

上面按1, 2, 3的順序是一個(gè)理想化操作, 但實(shí)際情況是對(duì)地址進(jìn)行g(shù)eocode的過(guò)程是異步的, 調(diào)用的fitBounds方法也是異步的。也就是說(shuō)當(dāng)你點(diǎn)擊輸出按鈕時(shí), 地圖并沒(méi)有完全設(shè)置好，這些蘋(píng)果專(zhuān)賣(mài)店的Marker可能在地圖上還沒(méi)有表示出來(lái),? 而且一個(gè)城市的蘋(píng)果專(zhuān)賣(mài)店都比較分散, 可能不會(huì)在地圖中顯示所有的Marker。想解決這個(gè)問(wèn)題就要同步gecode和fitBounds方法. 但是這兩上方法原生就是異步的, 沒(méi)有同步方法

?

解決辦法

添加2個(gè)int型變量, loadingItems和loadedItems。當(dāng)添加Marker時(shí)將loadingItems的值自增1。調(diào)用geocode方法解析地址為L(zhǎng)atLng對(duì)象，在回調(diào)函數(shù)中將loadedItems值自增1，并執(zhí)行mapObj.fitBounds(results[0].geometry.viewport) 方法， fitBounds方法會(huì)引發(fā)bounds_changed事件. 在bounds_changed事件中, 如果loadingItems和loadedItems相等就證明所有Marker加載完畢， 并執(zhí)行輸出按鈕的相應(yīng)邏輯， 代碼如下

var mapObj = new google.maps.Map(document.getElementById(targetContainer), mapOptions);
var bounds = new google.maps.LatLngBounds();
bounds.count = 0;
bounds.extendNew = function (latLng) {
this.extend(latLng);
this.count++;
};
function EventBind(target, eventName, func) {
var f = func;
google.maps.event.addListener(target, eventName, function (event) { func(event); });
}
EventBind(mapObj, "bounds_changed", function () {
if (loadingItems == loadedItems) {
if (allLoadedEvent != null) {
loadedItems = -1;
allLoadedEvent();
}
}
});
function AddMarkerWithBlurIcon(strAddress) {
var geocoder1 = new google.maps.Geocoder();

loadingItems++;

geocoder1.geocode({ "address": strAddress }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var markerImage = new google.maps.MarkerImage(
"http://maps.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png",
new google.maps.Size(20, 32),
new google.maps.Point(0, 0),
new google.maps.Point(0, 32)
);

loadedItems++;
mapObj.fitBounds(results[0].geometry.viewport);
bounds.extendNew(results[0].geometry.location);

var markerObj = new google.maps.Marker(
{
map: mapObj,
position: results[0].geometry.location,
icon: markerImage,
draggable: true
});
}
});
}

allLoadedEvent就是輸出按鈕的邏輯，allLoadedEvent在下面的方法中添加進(jìn)來(lái)

function ExecuteWhenMapLoadedAll(action, runNow) {
allLoadedEvent = action;
if (runNow == true) mapObj.fitBounds(bounds);
}

在bounds_changed事件中當(dāng)loadingItems == loadedItems條件成立時(shí)就會(huì)自動(dòng)執(zhí)行allLoadedEvent 。?

另一個(gè)問(wèn)題： 當(dāng)頁(yè)面有多個(gè)地圖,? 只有所有地圖的數(shù)據(jù)全部加載完以后再執(zhí)行相應(yīng)的代碼

將上面的代碼封裝為一個(gè)名為GoogleMapHelper的函數(shù)， 假設(shè)有2個(gè)地圖，那么

var m1 = new GoogleMapHelper();
var m2 = new GoogleMapHelper();

m1.Initialize();
m2..Initialize();

m1.ExecuteWhenMapLoadedAll(
function (){
/*m1的邏輯代碼*/
m2.ExecuteWhenMapLoadedAll(
function (){
/*最終需要執(zhí)行的代碼*/
__doPostBack(“<%= this.btnReport.ClientID %>", "");
}, true);
}, false);

轉(zhuǎn)載于:https://www.cnblogs.com/terrysun/archive/2012/01/13/2321346.html

總結(jié)

以上是生活随笔為你收集整理的Google Map V3--geocode与fitBounds方法的同步操作的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。