4

我正在使用 Phonegap、Backbone.js、Require.js 和 PageSlider ( https://github.com/ccoenraets/PageSlider ) 创建一个移动应用程序。

我想用标记显示一个简单的谷歌地图。模板如下所示：

<div class='main-content' id='map-container'>

    <a href="geo:51.903679,-8.468274">
        <div id="map-canvas"></div>
    </a>

</div>

这是视图：

define(function (require) {

"use strict";

var $                   = require('jquery'),
    _                   = require('underscore'),
    Backbone            = require('backbone'),
    tpl                 = require('text!tpl/Map.html'),
    side_nav                = require('text!tpl/SideNav.html'),
    template = _.template(tpl),
    map, myLatlng, mapOptions, marker;


return Backbone.View.extend({

    initialize: function () {          
        this.render();      
    },

    initMap: function () {

         myLatlng = new google.maps.LatLng(51.903679, -8.468274);

         mapOptions = {
            center: myLatlng,
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

            map = new google.maps.Map(this.$el.find('#map-canvas')[0],
                                      mapOptions);


         marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Christians Brothers College Cork'
        });

    },

    render: function () {
        this.$el.html(template({side_nav:side_nav}));
        this.initMap();       
    },


});

});

这是该应用程序的链接。当您单击“位置”时，地图会完美呈现。但是，当您导航到其他任何地方，然后返回位置时，在左上角只能看到地图的一小部分。

我试过这样做，这是在这里建议的：

google.maps.event.trigger(map, 'resize').

但无济于事。有任何想法吗？

4

1 回答 1

6

您的视图在未附加到 DOM 的节点上工作，因此没有大小， Google Map 不太喜欢这种情况。PageSlider在您的渲染功能发生后，您的路由器 via确实会附加节点。这是您的困境的演示：http: //jsfiddle.net/3C7g3/

您有几种选择来解决它：

  • 在节点插入 DOMgoogle.maps.event.trigger(map, 'resize') 后调用（这段代码对应于地图的路由器条目）

    // assuming you stored the map object in your view
require(["app/views/Map"], function (Map) {
    var view = new Map();
    slider.slidePage(view.$el);
    google.maps.event.trigger(view.map, 'resize');
 });

    http://jsfiddle.net/3C7g3/1/

  • 在调用渲染之前将节点插入 DOM。在您的情况下，这可能意味着从您的方法中删除渲染并在之后view.initialize调用。view.rendercontainer.append(page);slidePageFrom

    http://jsfiddle.net/3C7g3/2/

  • 一种更骇人听闻的方法是将元素临时添加到 DOM，应用 Google 地图，然后将其从 DOM 中删除

    initMap: function () {
    // assuming a temp class that hides the element. For example,
   // .temp {position: absolute; visibility:hidden; }
    this.$el.addClass('temp');
    $('body').append(this.$el);
    // ...
    this.$el.remove();
    this.$el.removeClass('temp');
}

    http://jsfiddle.net/3C7g3/3/

于 2013-11-16T15:06:29.730 回答