map.fitbounds google maps api v3 不适用于从 jQM 面板选择的位置

Posted 2023-05-09

【中文标题】map.fitbounds google maps api v3 不适用于从 jQM 面板选择的位置

【英文标题】：map.fitbounds google maps api v3 not working for location selected from jQM panel

【发布时间】：2013-07-29 05:29:53

【问题描述】：

在加载主页时，我使用map.fitbounds 来适应地图上的几个位置。这工作正常。但是，当我从panel in the header 中手动选择一个位置时，假定的两个位置（起点和终点）不适合地图并且不在焦点范围内。在我缩小之后，我可以看到这些位置，并且它们似乎在在边界折线内。

注意：这是第二次加载地图。第一次自动加载地图，工作正常。

这是在点击时手动加载地图的代码。

$('#mylist').children().each(function()
var anchor = $(this).find('a');
  if(anchor.attr('id') != null)
     anchor.click(function()
    $("#mypanel").panel("close");
    var panelStation = [];
        panelStation.push("name": anchor.attr('id'), "localurl": $(this).data('localurl'),"latitude": $(this).data('latitude'), "longitude": $(this).data('longitude'),"distance": $(this).data('distance'), "duration": $(this).data('duration'));
        var latlngbounds = new google.maps.LatLngBounds();
        latlngbounds.extend(new google.maps.LatLng(panelStation[0].latitude, panelStation[0].longitude));
        latlngbounds.extend(origin);
        var mapOptions = mapTypeId: google.maps.MapTypeId.ROADMAP;
        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        var markerOrigin = new google.maps.Marker(
            position: origin,
            map: map,               
            title: "Origin!"
        );

        var markerDestination = new google.maps.Marker(
           position: new google.maps.LatLng(panelStation[0].latitude, panelStation[0].longitude),
           map: map,                
           title: "Destination!"
        );
        map.fitBounds(latlngbounds);
        google.maps.event.addListener(map, 'bounds_changed', function() 
          var bounds =  map.getBounds();
          var ne = bounds.getNorthEast();
          var sw = bounds.getSouthWest();

          var boundingBoxPoints = [
            ne, new google.maps.LatLng(ne.lat(), sw.lng()),
            sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne
          ];
          var boundingBox = new google.maps.Polyline(
            path: boundingBoxPoints,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
          );

          boundingBox.setMap(map);
        );                         
     );
  
);

缩小后它看起来像这样，并注意边界内的位置。 然而，他们在一开始就失去了焦点。您也可以在线查看： here

我想知道它是否与一开始在pageinit上显示地图的fitbounds有关。但同样，在手动选择一个应该没问题的位置后，我再次尝试重新绘制地图。我无法完全弄清楚是什么导致了这个问题。

更新 1： 这很可能是由于#map-canvas 的css，因为当我从列表面板#mypanel 中删除一些项目时，它工作正常。

CSS：

html  height: 100% 
body  height: 100%; margin: 0; padding: 0 
#map-canvas, #map-page  height: 100% 
#map-canvas 
padding: 0;
position : absolute !important; 
top : 40px !important;  
right : 0; 
bottom : 40px !important;  
left : 0 !important;     

这里是fiddle。但是，尽管添加了资源，但地图并没有显示在那里。

更新 2：

事实证明，列表面板#mypanel 在被填充时，它的高度导致了问题。对于列表中的少数项目，它可以正常工作，但是当项目更多时，视口似乎也随之拉长。面板div是：

<div data-role="panel" id="mypanel" data-theme="a">
</div>

我正在使用默认的 jQM css，它将面板内容包装在一个带有 ui-panel-inner 类的 div 中。因此，如果我像#mypanel .ui-panel-innerheight: 40px !important; 一样覆盖它的高度，它可以解决问题。

但我不认为这是一个优雅的解决方案，而是一个 hack。或者更确切地说是方式？我想听听一些更好的方法。

【问题讨论】：

请提供有关如何重现问题的说明。如果我转到您的实时版本，我只会看到一个位置。

这里是小提琴jsfiddle.net/BcNVu

当它起作用并出现问题时请告诉我们。

我已经在小提琴中添加了所有的外部资源。但是地图没有加载。

只是与小提琴相关的注意事项：您必须在“框架和扩展”部分选择“no wrap(in head)”而不是“onload”：jsfiddle.net/doktormolle/BcNVu/12

【参考方案1】：

现在可以使用小提琴了，令人惊讶的是，那里的代码无需任何修改就可以正常工作。 http://jsfiddle.net/doktormolle/BcNVu/12/。我有这样的panel div：

<div data-role="panel" id="mypanel" data-theme="a">
</div>

不像在小提琴中，至少在我的开发环境中，我不得不添加

#mypanel .ui-panel-innerheight: 40px !important;

到 css 使其工作.. 因为默认的 jQM css 将 panel content 包装在一个带有类 ui-panel-inner 的 div 中。所以如果我覆盖它的高度，它就解决了这个问题。这是小提琴http://jsfiddle.net/BcNVu/14/。