2

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

我是 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>

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

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

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

我认为这是因为造成问题的“显示：无”。有办法解决吗？

提前致谢

4

1 回答 1

1

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

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

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

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

于 2013-02-05T19:45:43.350 回答