Question

我剪切并粘贴了使用OverlayView的Google maps API文档中的一些示例代码，因此可以访问内置的MapCanvasProjection方法（fromLatLngToContainerPixel（）和fromLatLngToDivPixel（）），以便从Lat / Lon转换为容器像素再回来......很棒......

代码如下所示，并且非常简单，适用于所有缩放级别，直到地图投影开始换行（缩放级别低于2）。我知道投影是包装，但有没有一种数学方法来计算地图容器的大小而不使用JQUERY或其他外部图书馆???

理想情况下，我只是想使用Google maps 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>

Answer 1

或更简单：

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

其中map是MapClass个实例

Answer 2

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

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

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

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

2 个答案: