将标记链接映射到 JQueryMobile 对话框答案

【问题标题】：Maps marker link to JQueryMobile dialog将标记链接映射到 JQueryMobile 对话框
【发布时间】：2013-06-02 16:26:09
【问题描述】：

这是我的问题：我希望当您单击标记时您看不到信息窗口（我知道该怎么做），但您会看到另一个页面显示为对话框 (http://jquerymobile.com/demos/1.2.0-alpha.1/docs/pages/page-dialogs.html) 或弹出窗口（@987654322@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>

【问题讨论】：

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

【解决方案1】：

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

我希望这会有所帮助。

【讨论】：

如果我想为对话框中的每个标记插入不同的信息？我有一个信息数组，现在它只打印最后一个，使用信息窗口更容易，因为它为每个标记创建一个元素