0

这是我的问题：我希望当您单击标记时看不到信息窗口（我知道该怎么做），但您会看到另一个页面显示为对话框（http://jquerymobile.com/demos/1.2.0 -alpha.1/docs/pages/page-dialogs.html）或弹出窗口（http://jquerymobile.com/demos/1.2.0-alpha.1/docs/pages/popup/index.html#&ui-state =dialog）在jquery mobile 中，我尝试了很多解决方案，但它不起作用。

这是示例代码：

<!DOCTYPE html>
<html>

    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Info windows</title>
        <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script>
            function initialize() {
                var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
                var mapOptions = {
                    zoom: 4,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }

                var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

                var contentString = 'something html code';

                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });

                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: 'Uluru (Ayers Rock)'
                });
                google.maps.event.addListener(marker, 'click', function () {
                    infowindow.open(map, marker);
                });
            }

            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>

    <body>
        <div id="map-canvas"></div>
    </body>

</html>
4

1 回答 1

0

我添加了一个示例。当您单击标记时，会出现对话框页面。解决方法是使用不可见的锚点打开对话框并通过 JavaScript 单击它。

<!DOCTYPE html>
<html>

    <head>
        <title>Google Map Dialog</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
        <script>
            function initialize() {
                var mapCenter = new google.maps.LatLng(59.3426606750, 18.0736160278),
                    myOptions = {
                        zoom: 10,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        center: mapCenter
                    },
                    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

                var marker = new google.maps.Marker({
                    position: mapCenter,
                    map: map,
                    title: 'Stockholm'
                });

                google.maps.event.addListener(marker, 'click', function () {
                    $('#dialog-anchor').click();
                });
            }

            $(document).on("pageinit", "#home-page", function () {
                initialize();
            });
        </script>
    </head>

    <body>
        <!-- /page -->
        <div data-role="page" id="home-page">
            <!-- /header -->
            <div data-role="header" data-theme="c">
                 <h1>Google Map Dialog</h1>
            </div>
            <!-- /content -->
            <div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                <div id="map_canvas" style="height:300px;"></div>   
                <a href="#generic-dialog" id="dialog-anchor" style="display:none" data-rel="dialog">Open dialog</a>
            </div>
        </div>
        <!-- /page -->
        <div data-role="page" id="generic-dialog">
            <!-- /header -->
            <div data-role="header" data-theme="d">
                 <h1>Generic Dialog</h1>
            </div>
            <!-- /content -->
            <div data-role="content" data-theme="c">
                 <h1>Dialog</h1>
                 <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
            </div>
        </div>
    </body>

</html>

我希望这有帮助。

于 2013-06-02T16:57:30.507 回答