根据选择更改嵌入的 google 地图位置

Question

感谢另一位用户之前的提问，我已经能够在我的网页上设置嵌入式地图并创建一些按钮。

<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">Na Fianna</button>
<button typeof="button" data-lat="48.8588589" data-long="2.3470599">St. Pauls</button>
<button typeof="button" data-lat="37.4038194" data-long="-122.081267">Kevins</button>

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d9521.05146600762!2d-6.2630277!3d53.374346!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x72398e1c9e377ac0!2sCLG+Na+Fianna!5e0!3m2!1sen!2sie!4v1448021350769" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>

但是我不知道如何让嵌入式地图根据选择的按钮更改位置。

Answer 1

阅读 documentation for the embed API:

The following URL parameter is required:

center defines the center of the map window, and accepts a latitude and a longitude as comma-separated values (-33.8569,151.2152). Optional parameters

The following optional parameters can be used with any of the map modes listed above.

zoom sets the initial zoom level of the map. Accepted values range from 0 (the whole world) to 21 (individual buildings). The upper limit can vary depending on the map data available at the selected location. maptype can be either roadmap (the default) or satellite, and defines the type of map tiles to load.

一个选项：

$(function() {
  $('button').each(function(i, btn) {
    $(btn).click(function() {
      var el = $(this)[0];
      var urlbeg="https://www.google.com/maps/embed/v1/view?key=yourApiKey&center=";
      var urlend="&zoom=18&maptype=roadmap";
      var lat=el.dataset.lat;
      var lng=el.dataset.long;
      $("iframe").attr("src",urlbeg+lat+","+lng+urlend);
    });
  });
});

working example

Answer 2

在地图末尾添加以下参数之一 URL 以更改地图位置：

&origin=lat,lang
&center=lat,lang
&ll=lat,lang

根据选择更改嵌入的 google 地图位置

Change embedded google map location based on selection

jquery

google-maps

onclick