如何阻止 Google 地图以插入的信息为中心 Windows

Question

我有一张地图，我正在动态填充标记和信息 windows。我遇到的问题是，在填充地图后，它会自动重新集中在信息 windows 上（但不是很好）。

它也出现了几次居中，我认为它试图以最后添加的 x 个为中心（不是最后一个，但也绝对不是全部）。

为什么这对我特别重要，因为我正在为两个城市填充信息 Windows，并且逐个城市这样做，而地图总是偏离第二个城市的中心（及其所有信息 windows).

我做了一个 fiddle 来展示这个行为。添加图钉不会重新居中，但添加信息 windows 会。（他们填充起始位置的 SE）

javascript:

var map;
var markers;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -30,
      lng: 150
    },
    zoom: 8
  });
  markers = [];
}

function fire1() {
  for (let i = 0; i < 10; i++) {
    let position = {
      lat: -34.397 + Math.random() - 0.5,
      lng: 150.644 + Math.random() - 0.5
    }
    let point = new window.google.maps.InfoWindow({
      position: position,
      content: `<span>${i}</span>`
    })
    point.open(map)
  }
}

Answer 1

要防止打开信息窗口更改地图的中心，请将 disableAutoPan 属性设置为 true。来自 the documentation:

disableAutoPan
Type: boolean optional
Disable auto-pan on open. By default, the info window will pan the map so that it is fully visible when it opens.

let point = new window.google.maps.InfoWindow({
  position: position,
  content: `<span>${i}</span>`,
  disableAutoPan: true
})

proof of concept fiddle

相关问题：

Center google map on kml, not location

代码片段：

var map;
var markers;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -30,
      lng: 150
    },
    zoom: 8
  });
  markers = [];
}

function fire1() {
  for (let i = 0; i < 10; i++) {
    var marker = new google.maps.Marker({
      position: {
        lat: -34.397 + Math.random() - 0.5,
        lng: 150.644 + Math.random() - 0.5
      },
      map: map
    });
    markers.push(marker);
  }
}


function fire2() {
  for (let i = 0; i < 10; i++) {
    let position = {
      lat: -34.397 + Math.random() - 0.5,
      lng: 150.644 + Math.random() - 0.5
    }
    let point = new window.google.maps.InfoWindow({
      position: position,
      content: `<span>${i}</span>`,
      disableAutoPan: true
    })
    point.open(map)
  }
}

#map {
  height: 100%;
}

.explanation {
  position: absolute;
  z-index: 1000;
  left: 200px;
  top: 20px;
  background: white;
  padding: 10px;
  margin-right: 70px;
  border: 2px #666 inset;
}

.fire {
  position: absolute;
  z-index: 1000;
  left: 20px;
  background: red;
  color: white;
  padding: 10px;
}

#fire1 {
  top: 60px;
}

#fire2 {
  top: 100px;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" async defer></script>
<button onclick="fire1()" id="fire1" class="fire">
  Insert Markers
</button>
<button onclick="fire2()" id="fire2" class="fire">
  Insert InfoWindows
</button>
<div class="explanation">When I add markers the map center remains still; but when I add info windows, the map seems to try and center them (badly) - how to I keep the map still?
</div>

如何阻止 Google 地图以插入的信息为中心 Windows

How to stop Google Maps from centering on inserted Info Windows

google-maps-api-3