blocks|key|35257|text|将映射变量移动到事件侦听器可以使用的作用域中。您是在initialize()函数中创建映射的，当以这种方式创建时，其他任何东西都不能使用它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|35258|var+map;+//<--+This+is+now+available+to+both+event+listeners+and+the+initialize()+function
function+initialize()+{
++var+mapOptions+=+{
+++center:+new+google.maps.LatLng(40.5472,12.282715),
+++zoom:+6,
+++mapTypeId:+google.maps.MapTypeId.ROADMAP
++};
++map+=+new+google.maps.Map(document.getElementById("map-canvas"),
++++++++++++mapOptions);
}
google.maps.event.addDomListener(window,+'load',+initialize);
google.maps.event.addDomListener(window,+"resize",+function()+{
+var+center+=+map.getCenter();
+google.maps.event.trigger(map,+"resize");
+map.setCenter(center);+
});|code-block|syntax|javascript|35259|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Move your map variable into a scope where the event listener can use it. You are creating the map inside your initialize() function and nothing else can use it when created that way.

<pre><code>var map; //&lt;-- This is now available to both event listeners and the initialize() function
function initialize() {
 var mapOptions = {
 center: new google.maps.LatLng(40.5472,12.282715),
 zoom: 6,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 map = new google.maps.Map(document.getElementById("map-canvas"),
 mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
 var center = map.getCenter();
 google.maps.event.trigger(map, "resize");
 map.setCenter(center); 
});
</code></pre>

blocks|key|251625|text|几年后，我转到了leaflet地图，我已经完全解决了这个问题，以下内容也可以应用于google地图：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|251626|++++var+headerHeight+=+$("#navMap").outerHeight();
++++var+footerHeight+=+$("footer").outerHeight();
++++var+windowHeight+=+window.innerHeight;
++++var+mapContainerHeight+=+headerHeight+%2B+footerHeight;
++++var+totalMapHeight+=+windowHeight+-+mapContainerHeight;
++++$("#map").css("margin-top",+headerHeight);
++++$("#map").height(totalMapHeight);

++++$(window).resize(function(){
++++++++var+headerHeight+=+$("#navMap").outerHeight();
++++++++var+footerHeight+=+$("footer").outerHeight();
++++++++var+windowHeight+=+window.innerHeight;
++++++++var+mapContainerHeight+=+headerHeight+%2B+footerHeight;
++++++++var+totalMapHeight+=+windowHeight+-+mapContainerHeight;
++++++++$("#map").css("margin-top",+headerHeight);
++++++++$("#map").height(totalMapHeight);
++++++++map.fitBounds(group1.getBounds());
++++});|code-block|syntax|javascript|251627|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

After few years, I moved to leaflet map and I have fixed this issue completely, the following could be applied to google maps too:

<pre><code> var headerHeight = $("#navMap").outerHeight();
 var footerHeight = $("footer").outerHeight();
 var windowHeight = window.innerHeight;
 var mapContainerHeight = headerHeight + footerHeight;
 var totalMapHeight = windowHeight - mapContainerHeight;
 $("#map").css("margin-top", headerHeight);
 $("#map").height(totalMapHeight);

 $(window).resize(function(){
 var headerHeight = $("#navMap").outerHeight();
 var footerHeight = $("footer").outerHeight();
 var windowHeight = window.innerHeight;
 var mapContainerHeight = headerHeight + footerHeight;
 var totalMapHeight = windowHeight - mapContainerHeight;
 $("#map").css("margin-top", headerHeight);
 $("#map").height(totalMapHeight);
 map.fitBounds(group1.getBounds());
 });
</code></pre>

I'm trying to get google maps responsive and resize while keeping its center when windows resizes. I read other stack questions in regards such as:

<a href="https://stackoverflow.com/questions/15421369/responsive-google-map">Responsive Google Map?</a> and <a href="https://stackoverflow.com/questions/8792676/center-google-maps-v3-on-browser-resize-responsive">Center Google Maps (V3) on browser resize (responsive)</a>

from the second stack question <a href="http://hsmoore.com/keep-google-map-v3-centered-when-browser-is-resized/" rel="nofollow noreferrer">I got a link which helps me with part of the code</a> but I still have no luck. This is the code I am using, when I resize the window, the maps doesn't resize at all

<pre><code> function initialize() {
 var mapOptions = {
 center: new google.maps.LatLng(40.5472,12.282715),
 zoom: 6,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var map = new google.maps.Map(document.getElementById("map-canvas"),
 mapOptions);
 }
 google.maps.event.addDomListener(window, 'load', initialize);
 google.maps.event.addDomListener(window, "resize", function() {
 var center = map.getCenter();
 google.maps.event.trigger(map, "resize");
 map.setCenter(center); 
 });
</code></pre>

html

<pre><code> &lt;div id="map-canvas"/&gt;
</code></pre>

css

<pre><code>html { height: 100% }
body { height: 100%; margin: 0; padding: 0; }
#map-canvas { height: 100%; }
</code></pre>

Google maps responsive resize

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在尝试让谷歌地图响应和调整大小，同时保持其中心时，窗口大小。我阅读了其他堆栈问题，例如：和第二个堆栈的问题是，但我仍然没有运气。这是我正在使用的代码，当我调整窗口大小时，地图根本不会调整大小    function initialize() {      var mapOptions = {       cente...

问Google地图响应式调整大小
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Google地图响应式调整大小EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Google地图响应式调整大小
EN