Question

我正在使用谷歌地图和jquery mobile。

当用户触摸按钮时，会显示地图。

此地图上有标记，当用户触摸地图显示按钮时，它们已经知道。

这很好用。这是html：

<div data-role="page" style="width: 100%; height: 100%" data-ajax="false" id="map-content"> 
    <div id="map_canvas" class="ui-content" style="width: 100%; height: 100%"></div>
</div>

这是javascript：

function showMap(){

var initLoc;

console.log("Pend showMap() START");    

$.mobile.changePage( "#map-content", { transition: "slideup"} ); 
$(document).on('pageshow', '#map-content',function(e,data){

    $('#map-content').height(getRealContentHeight());

    initLoc = new google.maps.LatLng(0,0);

        $('#map_canvas').gmap( { 'center': initLoc, 'zoom' : 16 } );
        $('#map_canvas').gmap('addMarker', {'position': initLoc, 
                                        'icon': gimage, 
                                        'shadow' : shadow,
                                        'bound': false});

    for (var i = 0; i<myArr.length; i++){
      var newLoc = new google.maps.LatLng(myArr[i][1], myArr[i][2]);
      $('#map_canvas').gmap('addMarker', {'id':i, 
                                          'position': newLoc, 
                                          'icon': bimage, 
                                          'shadow' : shadow,
                                          'bound': false}).click(function() {
                                                     $('#map_canvas').gmap('openInfoWindow', 
                                                                                           { 'content': 'some content }, 
                                                                                           this);
      });
    }

        google.maps.event.trigger($('#map_canvas'), 'resize');
        google.maps.event.trigger($('#map-content'), 'resize');
});

}

function getRealContentHeight(){
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
            content_height -= (content.outerHeight() - content.height());
    }
    return content_height;
}

当用户离开此页面时出现问题：

$.mobile.changePage("#main", { 
              transition: 'slide',
              reverse: true });

然后

向地图添加一个新标记，并尝试通过调用showMap（）

重新显示它

显示的部分地图主要是空白区域。

我读过这是谷歌地图的一个症状，不知道要显示的屏幕大小，但解决方案应该是：

google.maps.event.trigger($('#map_canvas'), 'resize');
google.maps.event.trigger($('#map-content'), 'resize');

有人能建议将标记添加到先前渲染的地图然后重新显示地图的正确方法吗？

Answer 1

这对我来说不正确：

google.maps.event.trigger($('#map_canvas'), 'resize');
google.maps.event.trigger($('#map-content'), 'resize');

google.maps.event.trigger的第一个参数必须是Google Maps Javascript API v3对象，在本例中为google.maps.Map对象。

JQuery选择器$（'＃map_canvas'）不会返回google.maps.Map。

要获取所需的google.maps.Map，请使用：$('#map_canvas').gmap('getMap')

这应该适合你：

google.maps.event.trigger($('#map_canvas').gmap('getMap'), 'resize');

（无法告诉你的代码是否有“地图内容”上的地图，如果有，你需要在那里做同样的事情）

谷歌地图第一次显示正常;添加新标记后部分显示

1 个答案: