Question

我有一个包含10个不同地址的联系页面和中间的单个谷歌地图iframe，我想让地址可以点击，当你点击特定的地址时，地图的内容会发生变化并指向点击ADRESS。

我是一个jquery新手，我不知道这样做。

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

HTML：

默认情况下，这是地图加载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>

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

我现在能够正常工作！我设置输入看起来像普通链接所以现在一切都好，但我有一个问题：

当我点击更改地图时，显示的新地图不是“居中”，而是针脚错误地移动（针脚和中心位置现在位于左上角）。

我认为这是因为创建问题的“display：none”。有办法解决这个问题吗？

提前致谢

Answer 1

＃changesrc是否存在多次？然后你应该使用class属性而不是id，因为与后者不同，前者可以不止一次存在。

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

但是您可以将所有地图包装在＆lt; div＆gt;中标记并按需显示。当然，所有地图（可能是你的默认地图除外）都应该首先通过CSS隐藏。

你可以在这里看到一切：http://jsfiddle.net/FDKHee/pYX6Y/7
（CSS在右上角）

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

1 个答案: