谷歌地圖與流星不工作

對於我的項目，我需要谷歌地圖API。我只是可以通過腳本標記服務api，所以我嘗試了類似的東西。谷歌地圖與流星不工作

我的html：

<head> 
    <title>app</title> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> 
</head> 

<body> 
    {{> hello}} 
</body> 

<template name="hello"> 
    <div id="map-canvas"/> 
</template>

我的JS：

if (Meteor.isClient) { 

    var mapOptions = { 
     center: new google.maps.LatLng(-34.397, 150.644), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map-canvas"), 
      mapOptions);  
} 

if (Meteor.isServer) { 
    Meteor.startup(function() { 
    // code to run on server at startup 
    }); 
}

在執行錯誤是：未捕獲的ReferenceError：谷歌沒有定義

我怎樣才能得到這個工作？

來源

2013-05-05 chaosbohne

流星腳本在谷歌地圖API之前通常運行加載所以最好把你的代碼在一個Template.rendered：看Template.rendered在流星文檔

例如，如果你有一個模板

<template name="maps"> 
    <div id="map-canvas"></div> 
</template>

你的js應該是：

Template.maps.rendered = function() { 
    var mapOptions = { 
     center: new google.maps.LatLng(-34.397, 150.644), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map-canvas"), 
     mapOptions); 
}

它確實更多地取決於你的模板是什麼樣子。每當模板發生反應時，呈現的回調將重新運行。所以如果你發現它重新渲染，你可能不得不使用Session哈希來檢查它只設置一次地圖中心/設置。

另一種選擇是將地圖居中代碼放在Meteor.startup(function() { ... });中，但這又取決於您的模板結構，因爲地圖需要在第一個模板上可見，而不是在另一個頁面上可見（因爲div元素不會在屏幕）

來源

2013-05-05 13:10:49 Akshat

使用.created方法而不是.rendered僅執行一次任務 – handmade 2013-05-07 22:51:49

使用'.created'不需要首先渲染dom嗎？（即地圖畫布不會準備好嗎？）我認爲，但我會遇到錯誤，試圖找到地圖畫布 – Akshat 2013-06-19 17:11:38

谷歌地圖與流星不工作

回答

相關問題