Question

我想在jQuery Mobile弹出一个谷歌地图，并让它以一个脚本传递给它的坐标为中心。我一直在关注this教程，它将iframe加载到弹出窗口中。使用下面的代码。知道如何动态地将变量传递给这个iframe，还是知道在jQuery Mobile中弹出谷歌地图的替代方法？

弹出代码：

<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>

map.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Map</title>
        <script>
            function initialize() {
                var myLatlng = new google.maps.LatLng(coordinate);
                var myOptions = {
                    zoom: 15,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: "University of Westminster"
                });
                google.maps.event.addListener(map, 'bounds_changed', function () {
                    map.panTo(myLatlng);
                });
            }
        </script>
        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <style>
            html {
                height: 100%;
            }
            body {
                margin: 0;
                padding: 0;
                height: 100%;
            }
            #map_canvas {
                height: 100%;
            }
        </style>
    </head>

    <body onload="initialize()">
        <div id="map_canvas"></div>
    </body>

</html>

以动态为中心的jQuery Mobile Map弹出窗口

0 个答案: