當我嘗試加載谷歌地圖v3進行AJAX結果是:負載谷歌地圖v3可動態使用Ajax
<script src="http://maps.gstatic.com/intl/en_us/mapfiles/api-3/2/8a/main.js" type="text/javascript"></script>
在源代碼中
,我假定與JavaScript文件撰寫寫();
如何在沒有iframe的情況下做到這一點?
謝謝。
當我嘗試加載谷歌地圖v3進行AJAX結果是:負載谷歌地圖v3可動態使用Ajax
<script src="http://maps.gstatic.com/intl/en_us/mapfiles/api-3/2/8a/main.js" type="text/javascript"></script>
在源代碼中
,我假定與JavaScript文件撰寫寫();
如何在沒有iframe的情況下做到這一點?
謝謝。
我已經做了這樣的...這個例子使用jQuery和谷歌地圖3.x版
$.getScript("http://maps.google.com/maps/api/js?sensor=true®ion=nz&async=2&callback=MapApiLoaded", function() {});
function MapApiLoaded() {
//.... put your map setup code here: new google.maps.Map(...) etc
}
它工作正常,但我在js控制檯中發出警告: '警告:您已在此頁面上多次包含Google Maps API。這可能會導致意想不到的錯誤。「 – phpJs 2013-08-18 23:41:26
我已經改變了一點點這對我來說效果不錯
window.mapapiloaded = function() {
console.log('$.ajax done: use google.maps');
createusinggmaps();
};
$.ajax({
url: 'http://maps.google.com/-maps/api/js?v=3.2&sensor=true®ion=it&async=2&callback=mapapiloaded',
dataType: 'script',
timeout: 30000,
success: function() {
console.log('$.ajax progress: waiting for mapapiloaded callback');
},
error: function() {
console.log('$.ajax fail: use osm instead of google.maps');
createusingosm();
}
});
找到一個實用的方法。
小提琴這裏自定義事件(jQuery的):http://jsfiddle.net/fZqqW/94/
window.gMapsCallback = function(){
$(window).trigger('gMapsLoaded');
}
$(document).ready((function(){
function initialize(){
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(47.3239, 5.0428),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
}
function loadGoogleMaps(){
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src","http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback");
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}
$(window).bind('gMapsLoaded', initialize);
loadGoogleMaps();
})());
編輯 如果在全球範圍內宣佈,在Ajax應用程序特別是工作時的loadGoogleMaps
功能可能更實際。並且布爾檢查將防止由於導航而多次加載api。
var gMapsLoaded = false;
window.gMapsCallback = function(){
gMapsLoaded = true;
$(window).trigger('gMapsLoaded');
}
window.loadGoogleMaps = function(){
if(gMapsLoaded) return window.gMapsCallback();
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src","http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback");
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}
$(document).ready(function(){
function initialize(){
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(47.3239, 5.0428),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
}
$(window).bind('gMapsLoaded', initialize);
window.loadGoogleMaps();
});
實際上爲我開箱工作。 – 2013-03-01 16:12:25
https://developers.google.com/maps/documentation/javascript/tutorial#asynch – 2013-03-01 16:14:46
這就是我發現的感謝分享。順便更新我的答案,隨時發表評論。 – 2013-03-02 10:19:26
$LAB
.setOptions({AlwaysPreserveOrder:true})
.script("http://maps.google.com/maps/api/js?v=3.exp&sensor=false&async=2")
.script("http://maps.gstatic.com/intl/en_us/mapfiles/api-3/13/6/main.js")
.script("script.js");
裏面的script.js的初始化你的地圖,而谷歌的加載方法,例如:
Namespace.map = (function(){
var map,
markers = [];
return{
init: function(){
var myLatlng = new google.maps.LatLng(-25.363882,131.044922),
mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
markers.push(marker);
}
};
}());
內的script.js的:
Namespace.map.init();
// Don't use: google.maps.event.addDomListener(window, 'load', initialize);
注意:不要依賴就像谷歌改變第二個js文件的名稱一樣。下面是從他們的文檔的例子:
https://developers.google.com/maps/documentation/javascript/examples/map-simple-async
您必須使用此參數「回調=初始化」在谷歌地圖API的腳本與Ajax加載:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>
這是一個谷歌地圖文檔:
以後如何確保這個負載,我想讓我的屏幕渲染腳本運行1st。 – SuperUberDuper 2016-03-09 16:20:07
簡單和工作溶液(使用jQuery):
var gMapsLoaded = false;
function loadGoogleMaps() { if(!gMapsLoaded) { $.getScript("https://maps.googleapis.com/maps/api/js?sensor=false&async=2&callback=GoogleMapsLoaded", function(){}); } else { GoogleMapsLoaded(); } }
function GoogleMapsLoaded() {
gMapsLoaded = true;
// your code here - init map ...
}
將其粘貼到您的腳本中,然後調用函數loadGoogleMaps();當你需要它!
我編輯了代碼並添加了示例代碼。請查閱。 – 2013-07-25 08:59:58
如果您以後不需要SPA,該怎麼辦?爲什麼用戶不得不等待腳本加載? – SuperUberDuper 2016-03-09 16:19:05