我已经阅读了其他类似的线程,但没有一个问题/响应,这有助于使其足够简单,可以理解我需要做什么。我使用的是jQuery版本1.7,这可能解释了为什么其他问题中发布的某些代码不同。
谷歌地图加载在幻灯片中切换div,中心点偏移到西北,相对于打开div时显示的地图部分不可见。我试图显示一张非常简单的地图,没有什么花哨的。
jQuery(".toggle").click(function () {
// check the visibility of the next element in the DOM
jQuery(this).next().slideToggle(); // slide it down
});
我的jQuery知识有限,但我知道我需要在切换div后强制加载iframe。我只是不知道如何实现这一目标!HTML/PHP代码如下。
<span class="toggle">
View Map // with some CSS
</span>
<div id="maps" class="ui-helper-hidden">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=<?php echo $latitude;?>,<?php echo $longitude;?>&aq=&t=m&z=13&output=embed&key=123456789"></iframe>
</div>
您可能需要查看如何使用 JavaScript 和 Maps API 动态加载地图。在此过程中,您将创建一个中心点对象,然后可以在切换回调函数中重复使用该对象来重置地图的中心。这样的事情应该有效。
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
$(function () {
// create a center
var c = new google.maps.LatLng(-33.8790, 151.2064);
//create map options object
var mapOptions = {
zoom: 14,
center: c,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('maps'), mapOptions);
$(".toggle").click(function () {
// check the visibility of the next element in the DOM
$(this).next().slideToggle(300, function(){
google.maps.event.trigger(map, "resize"); // resize map
map.setCenter(c); // set the center
}); // slide it down
});
});
</script>