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

angularjs google map zoom map after max zoom exceeded

本文关键字：缩放 谷歌地图 地图 angularjs      更新时间：2023-09-26

我想在谷歌地图超过最大缩放级别后进行缩放。我搜索了一下，没有找到任何解决方案。我正在构建一个屋顶应用程序，任何人都可以帮助我。

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

您也可以用同样的方式设置minZoom。因此，只要你的用户不需要为了有效地移动而放大太远（例如，如果你的应用程序以某种方式以编程方式移动地图），那么你甚至可能想将minZoom设置为一个现实的值，以确保人们在试图向下滚动页面时不会意外地放大太远（我个人一直在用嵌入式谷歌地图做这件事，这让我抓狂）。但要小心：你不想因为剥夺用户高效导航地图的能力而破坏用户体验。

在阅读maxZoom和minZoom参数的描述时，您会注意到文档没有指定可接受数字的范围。那么，你是如何计算出要传递的数字的呢？创建地图后，如何更改最大缩放比例？

如果Map对象绑定到一个名为map的变量，则可以使用map.getZoom()获取当前缩放，并使用map.setZoom(zoom)设置当前缩放，其中zoom是浮点数，因此zoom >= 0。（注意：这些方法获取并设置Map对象的"缩放"属性，但直接对map.zoom进行更改将不会导致映射发生更改，因此请务必使用getter和setter方法）。

zoom属性的最大放大级别是0，但最大放大级别实际上会根据地图在世界中聚焦的而变化。（这是有道理的，因为根据海拔高度的不同，有些地方的街道可能在地下一英里。）在某些缩放级别上，谷歌将不再拥有（可用的）卫星图像。

输入MaxZoomService类。这个对象的构造函数可以在google.maps.MaxZoomService中找到。这个类的实例只有一个有用的方法：getMaxZoomAtLatLng，它将LatLng实例或LatLngLiteral作为第一个参数，并将处理结果的回调函数作为第二个参数。

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

以下示例显示了如何在地图当前视图中心的卫星视图上找到可用的最大缩放。

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()返回的映射div）必须位于容器内，因此此方法通常会导致其溢出容器，您将不得不处理增加的复杂性。

如果你仍然想这么做，那么下面是一些可能会有所帮助的拼图：

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
相关文章：