使用Google地图进行响应式设计

Question

我正在使用ng-map我的Angular应用程序中显示谷歌地图,但他可能是一个严格的JS问题(甚至只是CSS？).

如何实现响应式设计,以便我的地图能够很好地适应不同的显示尺寸,无论是桌面/移动设备,还是只是用户调整浏览器页面的大小？

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

我对这一切都很陌生,所以我希望我的问题可以理解.

Answer 1

根据建议,使用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的完整示例