我写了一个小脚本,它从JSON文件加载Google Maps标记并将它们放置在地图上。该脚本应该能够处理多个实例。目前,该脚本看起来像这样(用于测试我使用this JSON file):使用AJAX加载Google Maps API ...但多次实例只能使用一次
<div id="map" data-file="test.json" style="width: 200px; height: 200px; "></div>
<div id="map2" data-file="test2.json" style="width: 200px; height: 200px; "></div>
<!-- JAVASCRIPT -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var googleMaps = function() {
var $el,
apiLoaded = false;
// Init
// @public
function init(el) {
$el = $(el);
loadData($el.data('file'));
};
// Creating a marker and putting it on the map
// @private
function createMarker(data) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
title: data.title
});
}
// JSON file and API loaded
// @private
function ready(data) {
// Basic settings
var mapOptions = {
center: new google.maps.LatLng(58, 16),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($el[0], mapOptions);
// Create markers
$.each(data, function(key, value) {
createMarker(value);
});
}
// Load API
// @private
function loadAPI(callback) {
if (typeof google === 'object' && typeof google.maps === 'object') {
// API was already loaded
if(typeof(callback) === 'function') {
callback();
}
} else {
// API wasn't loaded yet
// Send an AJAX request
$.ajax({
url: 'http://www.google.com/jsapi/',
dataType: "script",
success: function() {
google.load('maps', '3', {
callback: function() {
// Check if callback function is set
if(typeof(callback) === 'function') {
callback();
}
},
other_params: 'sensor=false'
});
}
});
}
};
// Load JSON file
// @private
function loadData(file) {
$.ajax({
url: file,
success: function(data) {
var parsedJson = $.parseJSON(data);
loadAPI(function() {
ready(parsedJson);
});
},
error: function(request, status, error) {
// Error
console.log(error);
}
});
};
return {
init: init
}
}
});
</script>
它的工作原理,如果我只.init()
一个实例,像这样:
googleMaps().init(document.getElementById('map'));
但只要我尝试多次失败实例:
googleMaps().init(document.getElementById('map'));
googleMaps().init(document.getElementById('map2'));
我认为失败是因为.loadAPI()
和google.load()
功能在一排,我的CHEC获取调用两次如果Google Maps API已经加载失败,Chrome内部.loadAPI()
内的k(Chrome Inspector:Uncaught TypeError:Object#没有方法'Load'(Google Maps API JS文件))。
我如何确保.loadAPI()
函数中的AJAX请求没有被调用两次?我可以在我的模块模式之外使用一个全局变量,我将其设置为true,但我并不真正想为此使用它。还有什么我可以使用的?
在此先感谢。
这里伟大的小片段...效果很好在很多情况下。 –