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：

需要以下网址参数：

center 定义地图窗口的中心，并以逗号分隔值（-33.8569,151.2152）接受纬度和经度。   可选参数

以下可选参数可与上面列出的任何地图模式一起使用。

缩放设置地图的初始缩放级别。可接受的值范围从0（全世界）到21（个别建筑物）。上限可以根据所选位置的可用地图数据而变化。    maptype 可以是路线图（默认）或卫星，并定义要加载的地图图块的类型。

一个选项：

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

根据选择更改嵌入式谷歌地图位置

2 个答案: