Fatal编程技术网
  • javascript/
  • Javascript 谷歌地图API v3-计算地图容器的高度和宽度

Javascript 谷歌地图API v3-计算地图容器的高度和宽度

javascript google-maps-api-3

Javascript 谷歌地图API v3-计算地图容器的高度和宽度,javascript,google-maps-api-3,Javascript,Google Maps Api 3,我从Google maps API文档中剪切并粘贴了一些使用覆盖视图的示例代码，这样就可以访问内置的MapCanvasProjection方法（fromLatLngToContainerPixel（）和fromLatLngToDivPixel（）），以便从Lat/Lon转换为容器像素，然后再转换回来。。。太好了 代码如下所示，非常简单，在所有缩放级别上都有效，直到地图投影开始换行（在2以下的缩放级别）。我知道投影是包装的，但是有没有一种数学方法可以在不使用JQUERY或其他外部库的情况下计算地图

我从Google maps API文档中剪切并粘贴了一些使用覆盖视图的示例代码，这样就可以访问内置的MapCanvasProjection方法（fromLatLngToContainerPixel（）和fromLatLngToDivPixel（）），以便从Lat/Lon转换为容器像素，然后再转换回来。。。太好了

代码如下所示，非常简单，在所有缩放级别上都有效，直到地图投影开始换行（在2以下的缩放级别）。我知道投影是包装的，但是有没有一种数学方法可以在不使用JQUERY或其他外部库的情况下计算地图容器的大小

理想情况下，我只想使用GoogleMapsAPI提供的对象和方法将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>


获取地图容器大小
#地图画布{边距：0；填充：0；高度：600px；宽度：800px；}
var叠加；
test_overlay.prototype=new google.maps.OverlayView（）；
函数初始化（）{
var mapOptions={zoom:11，center:new google.maps.LatLng（62.323907，-150.109291）}；
var map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
覆盖层=新的测试覆盖层（地图）；
}
功能测试覆盖图（map）{
this.map=map；
this.div=null；
这个.setMap（map）；
}
test_overlay.prototype.onAdd=函数（）{
var div=document.createElement（'div'）；
div.style.cssText=“边框：1px纯红；背景：rgba（245245、245、220、0.2）；”
this.div=div；
var panes=this.getPanes（）；
窗格。覆盖层。附属物（分区）；
};
test_overlay.prototype.draw=函数（）{
//获取投影以获取有关地图容器分区的信息。。。
var proj=this.getProjection（）；
如果（项目）{
var ww=proj.getWorldWidth（）；
var b=this.map_u2;.getBounds（）；
var map_ne=b.getNorthEast（）；
var map_sw=b.getSouthWest（）；
var cont_ne_pt=LatlngToContainerPixel（映射）项目；
var cont_sw_pt=LatlngToContainerPixel项目（地图西南）；
var div_ne_pt=Latlngtodivpix（映射）项目；
var div_sw_pt=Latlngtodivpix（map_sw）项目；
var div=this.div_2;；
var宽度=分压头x-分压头sw分压头x；
变量高度=第y部分-第y部分；
var s=''；
s+='Zoom='+this.map_uzy.getZoom（）.toString（）；
s+='
世界宽度='+ww.toString（）；
s+='
映射NE='+Map_NE.toString（）；
s+='
Map SW='+Map_SW.toString（）；
s+='
从LatlngToContainerPixel（映射NE）='+cont_NE pt.toString（）；
s+='
从LatlngToContainerPixel（映射SW）='+cont_SW_pt.toString（）；
s+='
来自latlngtodivpixel（映射NE）='+div_NE_pt.toString（）；
s+='
来自LATLNGTODIVPIXEL（映射SW）='+div_SW_pt.toString（）；
s+='
映射高度='+Height.toString（）+'px'；
s+='
映射宽度='+Width.toString（）+'px'；
s+=''；
div.innerHTML=s；
}
};
test_overlay.prototype.onRemove=函数（）{
this.div\u.parentNode.removeChild（this.div\u）；
this.div=null；
};
google.maps.event.addDomListener（窗口“加载”，初始化）；
如果只需要地图容器的像素尺寸，则根本不需要地图API。容器元素的
offsetWidth
和
offsetHeight
属性具有您要查找的值

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

var container = document.getElementById('map-canvas');
var width = container.offsetWidth;
var height = container.offsetHeight;
或更简单：

var w = map.getDiv().offsetWidth;
var h = map.getDiv().offsetHeight;
其中
map
是一个实例

谢谢，但是--我真正想要的是在所有缩放级别上，在贴图容器中从lat/lon转到像素x，y的方法。目前，即使是谷歌提供的方法在投影结束时也存在问题。