jquery 和 google maps on page show 事件答案

【问题标题】：jquery and google maps on page show eventjquery 和 google maps on page show 事件
【发布时间】：2012-12-07 21:05:20
【问题描述】：

我一直在使用此代码在 jquery 移动页面显示事件中显示谷歌地图，但它不起作用..

$('#page3').live('pageshow', function(event, ui) {
    $('#googleMap').gmap().bind('init', function(ev, map) {
       $('#googleMap').gmap('addMarker', {'position': '57.7973333,12.0502107', 'bounds':  
true}).click(function() {
               $('#googleMap').gmap('openInfoWindow', {'content': 'Hello World!'}, this);
                    });
           }); 
  });

【问题讨论】：

pageshow 事件是什么？是来自 jQuery Mobile 吗？
是的，它来自 jquery mobile。

标签： jquery jquery-ui jquery-mobile google-maps-api-3

【解决方案1】：

我认为这个解决方案可以解决您的问题：

您的 map.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map</title>
<script>
    function initialize() {
        var myLatlng = new google.maps.LatLng( 51.520838, -0.140261 );
        var myOptions = {
            zoom: 15,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map( document.getElementById( "map_canvas" ), myOptions );
    }
</script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>
    html {
        height: 100%;
        overflow: hidden;
    }
    body {
        margin: 0;
        padding: 0;
        height: 100%;
    }
    #map_canvas { 
        height: 100%;
    }    
</style>
</head>
<body onload="initialize()">
    <div id="map_canvas"></div>
</body>
</html>

您打开 map.html 的按钮

<div data-role="popup" id="popupMap" data-overlay-theme="a" data-theme="a" data-corners="false" data-tolerance="15,15">
    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
    <iframe src="map.html" width="480" height="320" seamless></iframe>
</div>

在jQuery Mobile - Popup iframes上查看更多信息

【讨论】：