使用HTML链接更改嵌入的Google地图位置 [英] Change embedded google maps location with HTML links
本文介绍了使用HTML链接更改嵌入的Google地图位置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
目前,该位置被硬编码到脚本中,并转到Mountain View。它看起来像这样:
< SRC = https://www.google.com/maps/embed/v1/view?zoom=12¢er=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¢er=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屋!
查看全文