javascript - 移动谷歌地图的中心(错误: Cannot read property 'fromLatLngToContainerPixel' of undefined)

Question

我使用 Google Maps API 请求一条路线，之后路线会自动居中，因为我使用了选项“preserveViewport: false”。现在我想把中心稍微移动一下。所以我尝试了以下代码:

var overlay_1 = new google.maps.OverlayView();
overlay_1.draw = function () {};
overlay_1.setMap(map_1);

var point_1
point_1 = overlay_1.getProjection().fromLatLngToContainerPixel(map_1.getCenter());
point_1.x = point_1.x + 300;
map_1.setCenter(overlay_1.getProjection().fromContainerPixelToLatLng(point_1));

当我启动网页时，出现以下错误:

Uncaught TypeError: Cannot read property 'fromLatLngToContainerPixel' of undefined

正如您在我的 Printscreen 中看到的那样，当我将代码放入控制台时，代码正在运行。

有人知道为什么我在加载网页时收到错误吗？

Answer 1

您必须等待叠加层上触发 projection_changed 事件，然后 .getProjection 方法才会返回有效结果。

相关问题:Why getProjection() is not working in V3

var overlay_1 = new google.maps.OverlayView();
overlay_1.draw = function() {};
overlay_1.setMap(map_1);

var point_1;
google.maps.event.addListener(overlay_1, 'projection_changed', function() {
  point_1 = overlay_1.getProjection().fromLatLngToContainerPixel(map_1.getCenter());
  point_1.x = point_1.x + 300;

  map_1.setCenter(overlay_1.getProjection().fromContainerPixelToLatLng(point_1));
});

proof of concept fiddle

代码片段:

function initialize() {
  var map_1 = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var overlay_1 = new google.maps.OverlayView();
  overlay_1.draw = function() {};
  overlay_1.setMap(map_1);

  var point_1;
  google.maps.event.addListener(overlay_1, 'projection_changed', function() {
    point_1 = overlay_1.getProjection().fromLatLngToContainerPixel(map_1.getCenter());
    point_1.x = point_1.x + 300;
    map_1.setCenter(overlay_1.getProjection().fromContainerPixelToLatLng(point_1));
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>