Google maps API v3 - 计算地图容器的高度和宽度答案

【问题标题】：Google maps API v3 - Calculating map container height and widthGoogle maps API v3 - 计算地图容器的高度和宽度
【发布时间】：2015-06-17 03:01:18
【问题描述】：

我从使用 OverlayView 的 Google 地图 API 文档中剪切并粘贴了一些示例代码，这样人们就可以访问内置的 MapCanvasProjection 方法（ fromLatLngToContainerPixel() 和 fromLatLngToDivPixel() ），以便从 Lat/Lon 转换为容器像素又回来了……太好了……

代码如下所示，非常简单，可以在所有缩放级别下工作，直到地图投影开始环绕（缩放级别低于 2）。我知道投影是环绕的，但是是否有一种数学方法可以在不使用 JQUERY 或其他外部库的情况下计算地图容器大小？？？

理想情况下，我只想使用 Google 地图 API 提供的对象和方法将 Lat/Lon 转换为像素坐标（在地图容器内）——但是如何处理投影环绕呢？如果有人可以提供建议，那就太好了！

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Get Map Container Size</title>
<style>
#map-canvas { margin:0;padding:0;height:600px;width:800px; }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>

<script>

   var overlay;

   test_overlay.prototype = new google.maps.OverlayView();

   function initialize() {

      var mapOptions = { zoom: 11, center: new google.maps.LatLng(62.323907, -150.109291) };

      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      overlay = new test_overlay( map );

   }

   function test_overlay(map) {

      this.map_ = map;

      this.div_ = null;

      this.setMap(map);

   }

   test_overlay.prototype.onAdd = function () {

      var div = document.createElement('div');

      div.style.cssText = "border:1px solid red;background: rgba(245, 245, 220, 0.2);"

      this.div_ = div;

      var panes = this.getPanes();

      panes.overlayLayer.appendChild(div);

   };


   test_overlay.prototype.draw = function () {

      // Get projection to get info on map container div ...

      var proj = this.getProjection();

      if (proj) {

         var ww = proj.getWorldWidth();

         var b = this.map_.getBounds();

         var map_ne = b.getNorthEast();
         var map_sw = b.getSouthWest();

         var cont_ne_pt = proj.fromLatLngToContainerPixel(map_ne);
         var cont_sw_pt = proj.fromLatLngToContainerPixel(map_sw);

         var div_ne_pt = proj.fromLatLngToDivPixel(map_ne);
         var div_sw_pt = proj.fromLatLngToDivPixel(map_sw);

         var div = this.div_;

         var width = div_ne_pt.x - div_sw_pt.x;

         var height = div_sw_pt.y - div_ne_pt.y;

         var s = '<div style="padding:8px;text-align:center;background: rgb(245, 245, 220);background: rgba(245, 245, 220, 0.2);">';

         s += 'Zoom = ' + this.map_.getZoom().toString();
         s += '<br>World Width = ' + ww.toString();
         s += '<br>Map NE = ' + map_ne.toString();
         s += '<br>Map SW = ' + map_sw.toString();
         s += '<br>fromLatLngtoContainerPixel(Map NE) = ' + cont_ne_pt.toString();
         s += '<br>fromLatLngtoContainerPixel(Map SW) = ' + cont_sw_pt.toString();
         s += '<br>fromLatLngtoDivPixel(Map NE) = ' + div_ne_pt.toString();
         s += '<br>fromLatLngtoDivPixel(Map SW) = ' + div_sw_pt.toString();
         s += '<br>Map Height = ' + height.toString() + 'px, ';
         s += '<br>Map Width = ' + width.toString() + 'px';
         s += '</div>';

         div.innerHTML = s;

      }

   };

   test_overlay.prototype.onRemove = function () {

      this.div_.parentNode.removeChild(this.div_);

      this.div_ = null;

   };

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

【问题讨论】：

标签： javascript google-maps-api-3

【解决方案1】：

或者更简单：

var w = map.getDiv().offsetWidth;
var h = map.getDiv().offsetHeight;

其中map 是MapClass 实例

【讨论】：

【解决方案2】：

如果您只需要地图容器的像素尺寸，则根本不需要 Maps API。容器元素的 offsetWidth 和 offsetHeight 属性具有您要查找的值。

在您的示例中，您可以使用：

var container = document.getElementById('map-canvas');
var width = container.offsetWidth;
var height = container.offsetHeight;

【讨论】：

谢谢，但是——我真正追求的是一种在地图容器中以所有缩放级别从纬度/经度到像素 x,y 的方法。目前，即使是 Google 提供的方法在投影结束时也会出现问题。