草庐IT

javascript - Google maps API v3 - 计算 map 容器的高度和宽度

coder 2025-02-17 原文

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

代码如下所示,非常简单,适用于所有缩放级别,直到 map 投影开始环绕(缩放级别低于 2)。我知道投影是环绕的,但是有没有一种数学方法可以在不使用 JQUERY 或其他外部库的情况下计算 map 容器的大小???

理想情况下,我只想使用 Google map API 提供的对象和方法将纬度/经度坐标转换为像素坐标(在 map 容器内)——但如何处理投影环绕?如果有人可以提供建议,那就太好了!

<!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>

最佳答案

或者更简单:

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

其中 mapMapClass实例

关于javascript - Google maps API v3 - 计算 map 容器的高度和宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30881598/

有关javascript - Google maps API v3 - 计算 map 容器的高度和宽度的更多相关文章

  1. ruby-on-rails - 使用一系列等级计算字母等级 - 2

    这里是Ruby新手。完成一些练习后碰壁了。练习:计算一系列成绩的字母等级创建一个方法get_grade来接受测试分数数组。数组中的每个分数应介于0和100之间,其中100是最大分数。计算平均分并将字母等级作为字符串返回,即“A”、“B”、“C”、“D”、“E”或“F”。我一直返回错误:avg.rb:1:syntaxerror,unexpectedtLBRACK,expecting')'defget_grade([100,90,80])^avg.rb:1:syntaxerror,unexpected')',expecting$end这是我目前所拥有的。我想坚持使用下面的方法或.join,

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  3. ruby - 如何计算 Liquid 中的变量 +1 - 2

    我对如何计算通过{%assignvar=0%}赋值的变量加一完全感到困惑。这应该是最简单的任务。到目前为止,这是我尝试过的:{%assignamount=0%}{%forvariantinproduct.variants%}{%assignamount=amount+1%}{%endfor%}Amount:{{amount}}结果总是0。也许我忽略了一些明显的东西。也许有更好的方法。我想要存档的只是获取运行的迭代次数。 最佳答案 因为{{incrementamount}}将输出您的变量值并且不会影响{%assign%}定义的变量,我

  4. ruby - 使用 Ruby,计算 n x m 数组的每一列中有多少个 true 的简单方法是什么? - 2

    给定一个nxmbool数组:[[true,true,false],[false,true,true],[false,true,true]]有什么简单的方法可以返回“该列中有多少个true?”结果应该是[1,3,2] 最佳答案 使用转置得到一个数组,其中每个子数组代表一列,然后将每一列映射到其中的true数:arr.transpose.map{|subarr|subarr.count(true)}这是一个带有inject的版本,应该在1.8.6上运行,没有任何依赖:arr.transpose.map{|subarr|subarr.in

  5. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  6. ruby - 在 ruby​​ 中使用 .try 函数和 .map 函数 - 2

    我需要从json记录中获取一些值并像下面这样提取curr_json_doc['title']['genre'].map{|s|s['name']}.join(',')但对于某些记录,curr_json_doc['title']['genre']可以为空。所以我想对map和join()使用try函数。我试过如下curr_json_doc['title']['genre'].try(:map,{|s|s['name']}).try(:join,(','))但是没用。 最佳答案 你没有正确传递block。block被传递给参数括号外的方法

  7. arrays - 计算数组中的匹配元素 - 2

    给定两个大小相等的数组,如何找到不考虑位置的匹配元素的数量?例如:[0,0,5]和[0,5,5]将返回2的匹配项,因为有一个0和一个5共同;[1,0,0,3]和[0,0,1,4]将返回3的匹配项,因为0有两场,1有一场;[1,2,2,3]和[1,2,3,4]将返回3的匹配项。我尝试了很多想法,但它们都变得相当粗糙和令人费解。我猜想有一些不错的Ruby习惯用法,或者可能是一个正则表达式,可以很好地回答这个解决方案。 最佳答案 您可以使用count完成它:a.count{|e|index=b.index(e)andb.delete_at

  8. ruby - 不能将 `each` 的所有或大多数情况替换为 `map` 吗? - 2

    Enumerable#each和Enumerable#map的区别在于返回的是接收者还是映射后的结果。回到接收者是微不足道的,你通常不需要在each之后继续一个方法链,比如each{...}.another_method(我可能没见过这样的案例。即使你想回到接收者那里,你也可以通过tap来实现)。所以我认为所有或者大部分使用Enumerable#each的情况都可以用Enumerable#map代替。我错了吗?如果我是对的,each的目的是什么?map是否比each慢?编辑:我知道当您对返回值不感兴趣时​​使用each是一种常见的做法。我对这种做法是否存在不感兴趣,但感兴趣的是,除了从

  9. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接,但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  10. ruby-on-rails - 如何计算 Ruby/Rails 中 JSON 对象的数量 - 2

    Ruby中如何“一般地”计算以下格式(有根、无根)的JSON对象的数量?一般来说,我的意思是元素可能不同(例如“标题”被称为其他东西)。没有根:{[{"title":"Post1","body":"Hello!"},{"title":"Post2","body":"Goodbye!"}]}根包裹:{"posts":[{"title":"Post1","body":"Hello!"},{"title":"Post2","body":"Goodbye!"}]} 最佳答案 首先,withoutroot代码不是有效的json格式。它将没有包

随机推荐