2

10個の異なる住所と中央に1つのGoogleマップ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>

なにか提案を？どんな助けでも大歓迎です。ありがとう！

これで正常に動作させることができました！入力を通常のリンクのように設定したので、今はすべて問題ありませんが、問題が1つあります。

クリックして地図を変更すると、表示されている新しい地図がピンの位置の「中央」になく、間違って移動しました（ピンと中央の位置が左上隅に表示されます）。

これは、問題を引き起こしている「display：none」が原因で発生すると思います。それを修正する方法はありますか？

前もって感謝します

4

1 に答える 1

1

#changesrcは複数回存在しますか？次に、後者とは異なり、前者は複数回存在することが許可されているため、class代わりに属性を使用する必要があります。id

srcブラウザのセキュリティルール（クロスドメインアクセス）のため、属性にアクセスできません。これは、jQueryとGoogleマップだけでなく、すべてのJavaScriptに適用されます。

ただし、すべてのマップを<div>タグでラップして、オンデマンドで表示することができます。もちろん、すべてのマップ（デフォルトのマップを除く）は、最初はCSSを介して非表示にする必要があります。

ここですべての動作を確認できます：http：//jsfiddle.net/FDKHee/pYX6Y/7
（CSSは右上にあります）

于 2013-02-05T19:45:43.350 に答える