jquery - 在按钮单击事件上使用 javascript 更改谷歌地图 iframe src 属性

Question

我有一个联系页面，其中有大约10个不同的地址，中间有一个谷歌地图iframe，我想让这些地址可点击，当你点击一个特定的地址时， map 的内容会改变并指向点击的地址地址。

我是 jquery 新手，我不知道如何做到这一点。

现在我坚持这个，但它不起作用:

HTML:

这是默认加载的 map ，ID为“map”。

<iframe id="map" width="650" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.it/maps?f=q&amp;source=s_q&amp;hl=it&amp;geocode=&amp;q=23,+Quai+des+Bergues&amp;aq=&amp;sll=46.198392,6.142296&amp;sspn=0.084955,0.222988&amp;ie=UTF8&amp;hq=&amp;hnear=Quai+des+Bergues+23,+Grottes+-+Saint-Gervais,+1201+Gen%C3%A8ve,+Svizzera&amp;t=m&amp;z=14&amp;ll=46.206419,6.145108&amp;output=embed&amp;iwloc=near"></iframe>

这是 ID 为“changesrc”的按钮。

<input type="submit" name="changesrc" id="changesrc" value="Another Adress" />

Javascript:

<script type="text/javascript">
        $('#changesrc').click(function() {
        $('#map').attr('src','http://maps.google.it/maps?f=q&amp;source=s_q&amp;hl=it&amp;geocode=&amp;q=roma&amp;aq=&amp;sll=41.811729,12.738513&amp;sspn=2.927223,7.13562&amp;ie=UTF8&amp;hq=&amp;hnear=Roma,+Lazio&amp;t=m&amp;z=11&amp;iwloc=A&amp;output=embed');
        });
    </script>

有什么建议吗？很感谢任何形式的帮助。谢谢!

<小时/>

我现在可以让它正常工作了!我将输入设置为看起来像普通链接，所以现在一切正常，但我有一个问题:

当我点击更改 map 时，显示的新 map 没有在图钉所在的位置“居中”，它移动错误(图钉和中心位置现在位于左上角)。

我认为发生这种情况是因为“显示:无”造成了问题。有办法解决这个问题吗？

提前致谢

Answer 1

#changesrc 是否存在多次？那么您应该使用 class 属性而不是 id，因为与后者不同，前者允许存在多次。

由于浏览器的安全规则(跨域访问)，您无法访问 src 属性。这适用于所有 JavaScript，而不仅仅是 jQuery 和 Google map 。

但是您可以将所有 map 包装在

标记中并按需显示。当然，所有 map (可能除了默认 map )都应该首先通过 CSS 隐藏。

您可以在这里看到这一切的实际情况:http://jsfiddle.net/FDKHee/pYX6Y/7
(CSS 位于右上角)

关于jquery - 在按钮单击事件上使用 javascript 更改谷歌地图 iframe src 属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14711084/