4

我ng-map用来在我的 Angular 应用程序中显示谷歌地图，但他很可能是一个直接的 JS 问题（甚至只是 CSS？）。

如何实现响应式设计，以便我的地图在不同的显示尺寸（无论是桌面/移动设备，还是只是用户调整浏览器页面大小）上看起来都很好？

这个页面做到了，但它使用 I 帧并且只有一个静态地图，而我将在运行时更新我的​​地图（定期跟踪）。

我对这一切都很陌生，所以我希望我可以理解地表达我的问题。

4

4 回答 4

7

按照建议使用 CSS 查询来调整 Google 地图非常容易。响应式地图的棘手部分是当您的地图上有标记、多边形或任何其他元素时。然后你必须添加一个事件监听器并操纵你的地图的行为。我在 Jsfiddle 上创建了一个完整的示例，尝试创建一个简单的 Angular.js 应用程序。

我为标记附加了一个主地图和一个事件侦听器。此外，另一个事件侦听器正在处理地图的大小调整。

//resize function add bounds to fit the markers
        google.maps.event.addDomListener(window, "resize", function() {
            var bound = new google.maps.LatLngBounds();
            for(var i in $scope.markers)
            {
               bound.extend($scope.markers[i].getPosition());
            }
            $scope.map.fitBounds(bound);
        });

最不重要的是，您将看到动态创建的地图的网格视图和一些用于操作其视图的 CSS 样式。

jsFiddle 上的完整示例

于 2014-06-15T12:51:04.520 回答
3

好问题。

您需要使用 CSS 媒体查询的组合来设置您希望地图所在的 div 的断点（这里有很多屏幕尺寸http://screensiz.es/phone）和 google maps API 来监听和响应调整大小事件。

如果您为地图设置了一个中心，那么它在加载时将始终是窗口的中心。但是，如果您想监听窗口调整大小然后重新居中地图，您可以使用一些基本的谷歌地图 APIv3 方法来计算中心然后重置它。

这是一个要点，其中包含您所追求的工作示例。我在上面Sai Ram Sudheer的回答中加入了一些媒体查询，只是为了举例（在这种情况下，地图占据了整个屏幕，所以它们对于那么大的地图并不重要）。

计算和重新设置中心所需的实际代码只有几行（查看 map.js 文件）

https://gist.github.com/markthethomas/5da15a050f560cc58d4f

这只是与调整大小相关的代码。如果您想对标记和边界做更多的事情，您必须编写函数来确定center您的程序和/或参数的含义（即框架中适合多少标记，应该显示哪些标记等）

// create a variable to hold center
  var center;
// calculate the center with getCenter
  function calculateCenter() {
    center = map.getCenter();
  }
// Add an event listener that calculates center on idle  
  google.maps.event.addDomListener(map, 'idle', function() {
    calculateCenter();
  });
  // Add an event listener that calculates center on resize  

  google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
  });

希望这会有所帮助！

于 2014-06-16T17:40:01.773 回答
2

您可以使用媒体查询来执行此操作，请考虑您的地图 div 与类地图

css：考虑您希望您的 div 与设备的 div 宽度居中对齐

   // show maps in a div with width 600px when you're on a big screen
//and div width of 160px in a device of 320px 
@media screen and (min-width: 1200px) {
    .maps{
        width:600px;
    }
}
@media screen and (max-width: 320px) {
        .maps{
            width:160px;
        }
    }

这是常见设备断点的列表

   /* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
于 2014-06-10T11:25:23.483 回答
0

对于谷歌地图 V3，您将需要触发调整大小事件，该事件用于当带有地图的 div 更改大小时。

google.maps.event.trigger(map, "resize");

这里是事件参考。

您可以通过检查此答案在页面更改时触发调整大小事件。

基本上，您只需让 div 响应大小（可能使用基于百分比的大小），然后要求地图自行调整大小。

希望这有帮助！

于 2014-06-12T05:24:49.183 回答