使用HTML链接更改嵌入的Google地图位置 [英] Change embedded google maps location with HTML links

问题描述

目前，该位置被硬编码到脚本中，并转到Mountain View。它看起来像这样：

< SRC = https://www.google.com/maps/embed/v1/view?zoom=12&center=37.3861,-122.0839&.......>

我想保留山景作为默认位置，但我也有5个链接（巴黎 - 北京 - 伦敦等），我希望能够通过点击链接来改变嵌入地图的位置。

我该怎么做？

>

谢谢

解决方案

$（'button'） .each（function（i，btn）{$（btn）.click（function（）{$（'iframe'）。attr（'src'，'https://www.google.com/maps/e mbed / v1 / place？key = AIzaSyDn5TU07R040YBRD-9ePpM8Noh-Z1NNVyw& q ='+ $（btn）.data（'lat'）+'，'+ $（btn）.data（'long'））; //此api密钥将过期。这只是为了这个例子。 }）;}）;

< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><button typeof =buttondata-lat =37.9758438data- long =23.7454209>希腊< / button>< button typeof =buttondata-lat =48.8588589data-long =2.3470599> Paris< / button>< button typeof =buttondata -lat =37.4038194data-long = - 122.081267> Mountain View< / button>< iframe width =600height =450frameborder =0style =border：0allowfullscreen src = https://www.google.com/maps/embed/v1/place?key=AIzaSyDn5TU07R040YBRD-9ePpM8Noh-Z1NNVyw&q=37.4038194,-122.081267\"></iframe>

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

I have a webpage with a google-maps embedded in it.

Currently the location is hard coded into the script and goes to Mountain View. which looks like this:

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

I want to keep mountain view as the default location but I also have 5 links (Paris - Beijing - London etc...) and I want to be able to change the location of the embedded map by clicking on the links

How can I do this?

Thanks

解决方案

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

This is an example. There are many ways to achieve the same result. Note that I used jQuery for element manipulation.

这篇关于使用HTML链接更改嵌入的Google地图位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！