我有一个页面，其中我有几个链接，应该用谷歌地图打开jquery-ui对话框。由于我正在从wordpress自定义字段加载坐标，我正在输出data-rel属性中的坐标，所以我可以使用jQuery来获取它们。一切正常，地图得到初始化，但我无法将监听器附加到地图数组中的地图对象。
我这样做
HTML：
<div class="mapalokacija">
<a title="Gde se nalazimo?" rel="addon-map-<?php echo $counter;?>" class="showmap" data-rel-lat='<?php echo $lat;?>' data-rel-long='<?php echo $long;?>' href='#map-<?php echo $counter;?>'>map</a>
<div class="modal" id="map-<?php echo $counter;?>">
<div id="addon-map-<?php echo $counter++;?>" style="width:400;height:400px;margin:10px auto;"></div>
</div>
JS
var title = '<?php the_title();?>';
window.maps = new Array();
$(document).ready(function(){
var cdc = 0;
$('.showmap').each(function(){
var popup = $(this).attr('href');
var lt = $(this).attr('data-rel-lat');
var ll = $(this).attr('data-rel-long');
var dv = $(this).attr('rel');
console.log(popup,lt,ll,dv,cdc);
cdc++;
addonMap(lt,ll,dv);
});
});
$(window).load(function(){
var counter = 0;
$('.showmap').each(function(){
$('.modal').dialog({
title: 'Gde se nalazimo?',
autoOpen: false,
width: 500,
height: 500,
resizeStop: function(event, ui) {google.maps.event.trigger(window.maps[counter], 'resize') },
open: function(event, ui) {google.maps.event.trigger(window.maps[counter], 'resize');}
});
google.maps.event.addListener( maps[counter], 'idle', function (){ google.maps.event.trigger(window.maps[counter],'resize');});
counter++;
});
});
function addonMap(lat,lng,div,ccc) {
var lat = parseFloat(lat);
var lng = parseFloat(lng);
var latLang = new google.maps.LatLng(lat,lng);
var mapOptions = {
scrollwheel: false,
navigationControl: false,
mapTypeControl: true,
scaleControl: false,
zoomControl: true,
draggable: true,
center: new google.maps.LatLng(lat,lng),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var mapstring = div;
var lmap = new google.maps.Map(document.getElementById(mapstring),mapOptions);
var marker = new google.maps.Marker({
position: latLang,
map: lmap,
title: title
});
window.maps.push(lmap);
}
$('.showmap').click(function(e){
e.preventDefault();
var popup = $(this).attr('href');
var lt = $(this).attr('data-rel-lat');
var ll = $(this).attr('data-rel-long');
var cc = $(popup).attr('rel');
cc = +cc;
console.log(cc);
$(popup).dialog('open');
google.maps.event.trigger(maps[cc], 'resize');
});
实例：
答案 0 :(得分：1)
我看一下你的实例，你的代码中有几个错误，但主要是你的地图没有调整大小的原因是因为你的css没有很好的定义而且你没有专注于你必须听的事件和你必须触发地图的resize事件。
为此，您必须在resize对象的open事件中触发地图的dialog事件。
聆听地图的idle事件以触发resize事件无效idle事件：在平移或缩放后地图变为空闲时会触发 。正如你在这里看到的Google Maps API Reference/Map。
因此，当地图准备时，不会触发idle事件。
为简单起见，您可以考虑只使用一个对话框和一个地图，然后绑定标记，折线，infoWindow ......您希望在对话框打开时显示。
考虑以下可行的示例，并考虑实现更简单和更简单的逻辑：
<!DOCTYPE html>
<html>
<head>
<title>Multiple Maps on Popup demo </title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDYeeEtBV1zi5IOTKYz4WBD2UO0U3fuVcg&sensor=false"></script>
<!-- jQuery UI CSS -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<!-- jQuery UI js -->
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
.map-container { height: 100%; width: 100%; min-width: 500px; min-height: 300px; }
.dialog {}
.btn-dialog{}
</style>
</head>
<body>
<div>
<!-- buttons conveniently named as 'btn-dialog-n' where 'n' is the index of the dialog the button will open -->
<button id="btn-dialog-0" class="btn-dialog">Open Dialog 0</button>
<button id="btn-dialog-1" class="btn-dialog">Open Dialog 1</button>
<button id="btn-dialog-2" class="btn-dialog">Open Dialog 2</button>
<button id="btn-dialog-3" class="btn-dialog">Open Dialog 3</button>
<button id="btn-dialog-4" class="btn-dialog">Open Dialog 4</button>
</div>
<div>
<!-- divs (being dialogs) conveniently named as 'dialog-n' where 'n' is the index of the dialog -->
<div id="dialog-0" class="dialog">
<div id="map-container-0" class="map-container"></div>
</div>
<div id="dialog-1" class="dialog">
<div id="map-container-1" class="map-container"></div>
</div>
<div id="dialog-2" class="dialog">
<div id="map-container-2" class="map-container"></div>
</div>
<div id="dialog-3" class="dialog">
<div id="map-container-3" class="map-container"></div>
</div>
<div id="dialog-4" class="dialog">
<div id="map-container-4" class="map-container"></div>
</div>
</div>
<script language="javascript">
// maps array --> does not have to be direcly declared as window.maps as it will 'put itself' in the global object (aka window)
var maps = [];
// you can do all what you was wanting to do in only this DOM ready handler event.
$(document).ready(function() {
//Google Maps
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// initialize the maps and store them in 'maps' array
$(".map-container").each(function(){
var map = new google.maps.Map(this, mapOptions);
maps.push(map);
});
// Dialogs
// initialize the dialogs
$(".dialog").dialog({
autoOpen: false,
height: 500,
width: 700,
modal: true,
open: function () {
// get the current dialog being opend and then get the 'id' attribut that has a simply convetion 'dialog-n' where 'n' is the index of the dialog
var $this = $(this),
index = $this.attr("id").split('-')[1];
// so that i can trigger the 'resize' event in the correct 'map' object
google.maps.event.trigger(maps[index], "resize");
},
close: function () {
console.log("close");
}
});
// initialize the buttons
$(".btn-dialog").button()
// bind the click event to each button
.click(function () {
console.log(this);
console.log($(this));
// get the current 'button' which the user is clicking to,
var $this = $(this),
// then get the 'id' attribute that has a simply convention 'btn-dialog-n' where 'n' is the index of the dialog the button will open
index = $this.attr("id").split('-')[2];
// then I can open the correct dialog
$("#dialog-" + index).dialog("open");
});
});
</script>
</body>
</html>