问题描述
我有一个内嵌有Google地图的网页。
目前，位置已硬编码到脚本中，然后转到山景城。 看起来像这样：
<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&.......>
我想保留山景作为默认位置，但我也有5个链接（巴黎-北京-伦敦等...），我希望能够通过单击链接来更改嵌入式地图的位置
我怎样才能做到这一点？
谢谢
1楼
Kostas
1
已采纳
2015-07-26 08:00:53
$('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进行元素操作。