1

我尝试在 jQuery Page 中创建一个 gmap，它始终显示在其画布的左侧。

我正在使用 jQuery、js、Ajax 和 PhoneGap。

我添加了我的 html 的两个部分。

第一个在它的头部（当我切换到地图页面时将调用的javascript函数）

<script type="text/javascript">
    function fun() {            
       $(function() {  
            demo.add(function() {
                $('#map_canvas').gmap({'center': '57.7973333,12.0502107', 'zoom': 10, 'disableDefaultUI':true, 'callback': function() {
                    var self = this;
                    self.addMarker({'position': this.get('map').getCenter() }).click(function() {
                        self.openInfoWindow({ 'content': 'Hello World!' }, this);
                    }); 
                    self.addMarker({'position': '57.7,12.0502107'  }).click(function() {
                        self.openInfoWindow({ 'content': 'Hello !' }, this);
                    }); 
                }});
            }).load();
    ///tried to add this line with no use --->       google.maps.event.trigger(map, 'resize');
        });}
    </script>

第二个是包含两个页面的正文部分。

第一个页面有一个按钮可以进入地图页面并在头部调用有趣的功能。

第二页显示地图。

<div data-role="page" id="intro">

    <div data-role="header" data-position="fixed">
    <h1>header</h1>
    </div><!-- /header -->


    <div data-role="content">
    <h2>test</h2>
    <p><a href="#map" data-role="button" onClick="fun()" data-icon="arrow-r"> to map </a></p>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
    <h2>footer</h2>
    </div><!-- /footer -->
</div>


<div data-role="page" id="map">

    <header class="dark">
        <div class="container_16">
            <h1>map header</h1>
        </div>
    </header>

    <div data-role="content">
        <div class="item rounded dark">
            <div id="map_canvas" class="map rounded"></div>
        </div> <!-- /content -->
    </div>


    <footer class="dark">
        <div class="container_16">
            <div class="grid_16">
                <h2>map footer</h2>
            </div>
        </div>
    </footer>
</div>

正如我所说，地图已创建，但仅显示在画布的左上角。

4

0 回答 0