Question

当用户调整窗口大小时，我正在使用dom监听器来设置地图的中心，但我很困惑，因为没有任何反应！？我错过了什么？在响应式设计中，地图上的其他任何东西都能正常工作帮助是预先确定的。

如果有人想知道为什么我有这个代码{$mapPoints}，这是一个包含所有标记的PHP字符串。

编辑2：一开始，我在地图的中心有标记。然后我平移地图，标记不再位于中心。当我调整窗口大小时，我希望地图中心的标记从头开始（55.678939,12.568359）。我是否想念一些东西，或者这不可能吗？我还尝试在调整窗口大小时将地图的中心设置为这些坐标。

编辑1：

地图的CSS：

#map_canvas
{
width: 100%;
height: 350px;
margin: 20px 0 20px 0px;
}

var map = null;
var infowindow = new google.maps.InfoWindow();
var iconBase = 'images/mapNumbers/number';

function initialize() {

var myOptions = {
    zoom: 11,
center: new google.maps.LatLng(55.678939, 12.568359),
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

google.maps.event.addListener(map, 'click', function () {
    infowindow.close();
});

google.maps.event.addListener(map, 'zoom_changed', function () {
infowindow.close();
});

google.maps.event.addDomListener(window, 'resize', function() {
//map.setCenter(55.678939, 12.568359);
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center); 
});

// Add markers to the map
var point;
{$mapPoints}
 }

 // Create markers
function createMarker(latlng, html, name, number) {

var marker = new google.maps.Marker({
    position: latlng,
    map: map,
title: name,
icon: iconBase + number + '.png'
});

google.maps.event.addListener(marker, 'click', function () {
    infowindow.setContent(html);
    infowindow.open(map, marker);
//map.setCenter(marker.getPosition());
});

}

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

Answer 1

似乎在开始时你几乎做对了。我做了以下更改：

function initialize() {
    var markerPos = new google.maps.LatLng(55.678939, 12.568359);

var myOptions = {
    center: markerPos,
    ...
}

map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

var marker = new google.maps.Marker({
    position: markerPos,
    ...
});

google.maps.event.addDomListener(window, 'resize', function() {
    console.log('window resize');

    map.setCenter(markerPos);

    var center = map.getCenter();
    console.log(center);
    // google.maps.event.trigger(map, 'resize');
});

测试应该像你写的那样：加载地图，向左/向右平移，调整窗口大小。标记和地图应居中。

Answer 2

看一下bounds_changed事件：

google.maps.event.addListener(map, 'bounds_changed', function() {
  //do really cool stuff and change the world or at least a map of it
}

在调整窗口大小时，尝试查找错误的原因

2 个答案: