angularjs谷歌地图缩放超过最大缩放后的地图

时间:2016-03-24 17:08:17

标签: javascript angularjs

我希望在超过最大缩放级别后缩放谷歌地图。我谷歌它并没有找到任何解决方案。我正在构建一个屋顶应用程序,任何人都可以帮助我。

1 个答案:

答案 0 :(得分:1)

Google Maps API docs显示google.maps.MapOptions对象有一个名为maxZoom的属性,您可以在创建地图时设置以设置地图的最大数量被放大。

您也可以用同样的方式设置minZoom。因此,只要您的用户不需要能够非常远地缩放以便有效地移动(例如,如果您的应用程序以某种方式以编程方式移动地图),那么您甚至可能希望将minZoom设置为现实的价值,以确保人们在尝试向下滚动页面时不会意外地缩放太远(我个人一直使用嵌入式谷歌地图这样做,这让我发疯)。但请注意:您不希望通过删除用户有效导航地图的能力来破坏用户体验。

在阅读maxZoomminZoom参数的说明时,您会注意到的一件事是文档未指定可接受数字的范围。那么你怎么弄清楚要传入的数字呢?如何在创建地图后更改最大缩放?

如果Map对象绑定到名为map的变量,那么您可以使用map.getZoom()获取当前缩放,并且可以使用map.setZoom(zoom)设置当前缩放zoom是浮点数,zoom >= 0。 (注意:这些方法获取并设置Map对象的“缩放”属性,但直接更改为map.zoom 会导致地图发生变化,所以请务必使用getter和setter方法)。

zoom属性的最缩放级别为0,但放大幅度最大的级别实际上会根据世界中的不同而有所不同地图是重点。 (这是有道理的,因为某些地方的街道水平可能会在其他地方一英里处,这取决于海拔高度。)在某些缩放级别,Google将不再拥有(可用的)卫星图像。

输入MaxZoomService Class。可以在google.maps.MaxZoomService找到此对象的构造函数。这个类的实例只有一个有用的方法:getMaxZoomAtLatLngLatLng实例或LatLngLiteral作为第一个参数,回调函数将结果作为第二个参数处理。

可以使用LatLng构造函数创建google.maps.LatLng实例,LatLngLiteral只是具有lat属性和lng的普通对象文字属性。但是,由于您可能会从LatLng等其他方法传入map.getCenter()对象,因此您不必担心它。

以下是一个示例,说明如何在地图当前视图的中心找到卫星视图上可用的最大缩放。

var mzs = new google.maps.MaxZoomService();       // Create a MaxZoomService instance
var mapCenterLatLng = map.getCenter();            // Get a LatLng instance
var handleMaxZoom = function(res) {               // Callback Function accepting MaxZoomResult instance
     if (res.status === "OK") {
         // handle success
         console.log("Max Zoom: " + res.zoom);    // Print max possible zoom
         map.setZoom(res.zoom);                   // Set the zoom to the max possible
     } else {
         // handle failure
         console.log("Oops");
     }
};
mzs.getMaxZoomAtLatLng(mapCenterLatLng, handleMaxZoom);
// => Max Zoom: [Number]

修改

如果你真的想要超过最大缩放级别(不仅仅是默认最大缩放级别,如上所述),你唯一真正的选择就是使用css转换。根据页面布局的复杂程度,最终可能很难完美。

我应该注意,这通常是 ,即使您可以设法使布局看起来很好并且图像也是如此不要模糊它带来了与使用CSS转换canvas元素(以及顶部的一些其他问题)相同的问题,因为它不像处理单个DOM元素那么简单。一个值得注意的问题是,应用CSS变换不会影响地图的内部坐标(如点击事件中包含的坐标),因此每次要使用它们时都必须对其进行转换。此外,由于主映射div(由map.getDiv()返回的那个)必须位于容器内,因此此方法通常会导致其溢出其容器,您将不得不处理增加的复杂性。

如果您仍想这样做,那么这里有一些可能有用的谜题:

var mapCanvas = map.getDiv();            // The "main" div element that contains the map
var container = mapCanvas.parentElement; // You'll need some sort of container here
var scalingFactor = 1.5;                 // => Set a scaling factor (ex: 1.5 means scale it to 150% normal size)
/* Use CSS zoom property and/or vendor transforms to scale the map (though you could do this in straight CSS instead) */
mapCanvas.style.zoom = scalingFactor;
mapCanvas.style.MozTransform = 'scale(' + scalingFactor + ')';
mapCanvas.style.WebkitTransform = 'scale(' + scalingfactor + ')';
/* Then try to fit the scaled map back into its container, which will depend on how you're displaying it */
mapCanvas.style.width = "calc(100% / " + scalingFactor + ")"; // The CSS 'calc()' method might be useful here