谷歌地圖被渲染兩次

我有以下模板：谷歌地圖被渲染兩次

<template name="test"> 
    {{#isolate}} 
    <div id="map_canvas" style="width:50%; height:50%"></div> 
    {{/isolate}} 
</template>

在我test.js（從https://developers.google.com/maps/documentation/javascript/tutorial#HelloWorld）：

function initialize(){ 
    var mapOptions = { 
    center: new google.maps.LatLng(-34.397, 150.644), 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map($("#map_canvas")[0], mapOptions); 
} 

Template.test.rendered = function(){ 
    initialize(); 
    //*** The following is the workaround I am using:*** 
    // if (! this.initialized){ 
    // initialize(); 
    // this.initialized = true; 
    // } 
};

的問題是：沒有變通辦法顯示在註釋代碼部分，模板總是呈現兩次（如初始化（）運行）。它們都顯示在控制檯日誌中（日誌代碼未在此處顯示），也可以從地圖上看到閃爍一次（這是不可接受的）。

究其原因，我猜測，是從下列事件happending：

模板被渲染，以作爲一個簡單的div元素（沒有地圖附後）產生$('#map_canvas');
谷歌地圖api返回aync-ly並修改$('#map_canvas');
不知怎的，Meteor檢測到變化，並且儘管{{#isolate}}決定再次渲染整個模板（這在日誌中顯示）;
initialize（）再次被調用，在Template.test.rendered之內。

我的問題：

爲什麼呢？
如果這是發生了什麼，爲什麼流星只渲染兩次，而不是無限次？
解決方案？

3個問題和很多謝意！

來源

2012-11-10 Qichao Dong

你好，你是如何設法以正確的順序包含你的谷歌地圖API外部文件？我把它放在但是當我呼籲它它抱怨它不存在.. –

由於包含{{> test}}的外部上下文被重新呈現，該模板可能會被呈現兩次。出現這種情況的原因有很多，但通常只是在沒有訂閱數據的情況下呈現，然後是數據加載後的第二次呈現。

無論如何，在你的具體情況下，我想你想要的是一個{{#constant}}包裝谷歌地圖，而不是{{#isolate}}。

注意：{{#constant}}地區做得到重新渲染，如果（無論出於何種原因）周圍的上下文進行重新渲染。然而，新版本被丟棄而不是在DOM中被替換。所以只需要小心你的回撥只能做第一次。

來源

2012-11-12 05:51:25

我認爲你的評論是亂碼。 –

「評論只能在5分鐘內編輯」 - 對不起。謝謝你的回答。我終於有機會測試了這一點。 {{#contant}}也沒有工作。含'test'外模板：（I用一個簡單的外模板測試）： <模板名稱= 「索引」> {{>測試}} 所以我懷疑的是，外模板引起此。 –

請注意'{{#constant}}'模板確實被重新渲染（例如，''rendered'與helpers一起被調用）。然而，他們不會被取代，因此第一次放置的東西將會保留下來。你只需要在回調中小心一點。我會更新我的答案。 –

谷歌地圖被渲染兩次

回答

相關問題