中心参数无法在新的Google地图嵌入中使用

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>

这很好,并正确显示地图

当我尝试使用下面的代码添加"center"参数时,它会将地图缩放到整个世界视图

<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>

我最终想要做的是移动地图,使其不以实际标记为中心,但目前我正在测试一个非常接近标记的纬度和长度.

我正确使用¢er参数吗？有没有其他人得到&中心参数工作？

我已经检查过我使用的纬度和长度都在显示的地图中

Answer 1

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

我遇到了同样的问题,将'center ='添加到iframe网址中打破了地图.当我将'/ 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地图手动调整标记的Lat/Lon,右键单击然后"这里有什么".您已经需要为中心坐标执行此操作,因此这不应该是一个大问题.如果您想自动执行此操作,则可以使用Google地图地理编码服务,但这会在每个视图上发生:

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

Answer 2

如果您想在不使用 API 的情况下执行此操作，您仍然可以使用旧的 Google 地图经典编码。为了居中，您可以将以下内容添加到“src”代码中：&ll={latitude}, {longitude}

例如“&ll=44.013922，-88.342259”。只需确保它位于 src 的引号内即可。

您还可以使用 &z=# 设置自定义缩放

例如：“&z=20”将使您接近街景视图。

谁知道这会持续多久，所以使用时需要您自担风险，并且一定要定期检查......