javascript - 使用 HTML 链接更改嵌入的谷歌地图位置

Question

我有一个嵌入了谷歌地图的网页。

目前该位置已硬编码到脚本中并转到山景城。看起来像这样:

      <iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/view?zoom=12&center=37.3861,-122.0839&.......>

我想将山景保留为默认位置，但我还有 5 个链接(巴黎 - 北京 - 伦敦等...)，并且我希望能够通过单击链接来更改嵌入 map 的位置

我该怎么做？

谢谢

Answer 1

$('button').each(function(i, btn) {
  $(btn).click(function() {
    $('iframe').attr('src', 'https://www.google.com/maps/embed/v1/place?key=AIzaSyDn5TU07R040YBRD-9ePpM8Noh-Z1NNVyw&q=' + $(btn).data('lat') + ',' + $(btn).data('long'));
    // this api key will expire. It's just for this example.
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button typeof="button" data-lat="37.9758438" data-long="23.7454209">Greece</button>
<button typeof="button" data-lat="48.8588589" data-long="2.3470599">Paris</button>
<button typeof="button" data-lat="37.4038194" data-long="-122.081267">Mountain View</button>

<iframe width="600" height="450" frameborder="0" style="border:0" allowfullscreen src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDn5TU07R040YBRD-9ePpM8Noh-Z1NNVyw&q=37.4038194,-122.081267"></iframe>

这是一个例子。有很多方法可以达到相同的结果。请注意，我使用 jQuery 进行元素操作。