google-maps - 中心参数在新的谷歌地图嵌入中不起作用

Question

我已经为新的谷歌地图使用了新的嵌入代码，如下所述:

https://developers.google.com/maps/documentation/embed/guide

我的代码是:

<iframe width="500"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=KEY&q=Space+Needle,Seattle+WA">
</iframe>

这工作正常并正确显示 map

当我尝试使用下面的代码添加“中心”参数时，它会将 map 缩小到整个世界 View

<iframe width="500"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=KEY&q=Space+Needle,Seattle+WA&center=47.620467,-122.349116">
</iframe>

我最终想要做的是移动 map ，使其不以实际标记为中心，但目前我正在使用非常接近标记的纬度和经度进行测试。

我是否正确使用了 &center 参数？有没有其他人让 &center 参数工作？

我检查了我使用的纬度和经度是否在显示的 map 中

Answer 1

唉，这似乎是当前 Embed API 的一个错误。文档表明可以将 'center=' 与/place 一起使用，但实际上这不起作用。

我遇到了同样的问题，在 iframe URL 中添加 'center=' 会破坏 map 。当我将 '/place' 更改为 '/view' 并删除 'q=...' 部分时，它完美地工作。我已就此向 Google 发送了反馈。您可以通过此页面上的“对此文档的反馈”链接执行此操作:

https://developers.google.com/maps/documentation/embed/guide#optional_parameters

为了解决这个问题，我切换到了 Google Maps Javascript API v3。这个 API 更加灵活，而且它还让你摆脱了 iframe。

在您的情况下，这应该可以解决问题:

把这个放在前面

<script type="text/javascript">
var map;
function initialize() {
  var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(47.620467,-122.349116),
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var myLatlng = new google.maps.LatLng(47.620614, -122.348880);

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Space Needle, Seattle WA'
  });
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?key={API_KEY}&callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;

</script>

并添加

<div id="map-canvas" style="width: 500px; height: 450px;"></div>

到您的 HTML 某处。

缺点是您需要通过搜索谷歌地图手动调整标记的纬度/经度，右键单击然后“这里有什么”。您已经需要为中心坐标执行此操作，因此这应该不是大问题。如果您想自动执行此操作，您可以使用 Google Maps Geocoding 服务，但这会发生在每个 View 上:

https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple