2

Google マップで行き詰まる

ColdFusion を使用して - アリーナのリストにデータを入力しています... マップがある場合は、マップのドロップダウンが必要で、マップを追加するためのリンクが必要です。マップにデータを入力し、正常に機能するようにマークするためのリンク。

複数のエントリがある場合、複数のマップは表示されません。最後の結果のマップ表示のみが表示されます。

過去に使用した他のコーディングをいくつか試しましたが、複数のマップではうまくいきませんでした。そのため、この簡単に見える JavaScript から始めます。

どんな助けでも大歓迎です。古いコードの削除 - 現在機能しているものに移動 - マーカーを表示しないだけ

 <img src="../images/gps1.png" height=25 border=0 alt="Show Map" onclick="javascript:showElement('g#aid#')">

また、style="display:none;" を使用すると Google マップ Div で: 

  <div id="g#aid#" style="width: 600px; height: 300px;" style="display:none;"></div>

ドロップダウン マップはバグだらけで、中央に配置されていません。それがなければ-それはうまく閉じたり開いたりします-しかし、常にデフォルトで開いています。

提案されているように-ここにJavascript出力があります...ここに2つの結果の出力があります...最後の1つだけがマップを示しています..

以下はいくつかの進捗状況です - Google API から始めて - これが私がいるところです...

これを機能させるためのボディオンロードがあります...

すべてのマップが適切に表示されています...別のものを追加しても...マーカーを取得していません... Googleマーカーコードを試しました...まだ運がありません...マップを正しく表示しているコードに行くだけです...

マップマーカーを把握する必要があります...

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

    <cfoutput query=arena">


    <script>
    var map;
    function initialize() {
    var mapOptions = {
      zoom: 13,
      center: new google.maps.LatLng(#arena.agpslat#,#arena.agpslong#),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('g#arena.aid#'),
        mapOptions);

    }

    google.maps.event.addDomListener(window, 'load', initialize);
   </script>

   <div id="g#arena.aid#" style="width: 600px; height: 300px;"></div>

    </cfoutput>

これを追加する：マーカーを取得しません...

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: '#arena.arename#'
     });
4

2 に答える 2

2

問題は、JS ファイルを呼び出して、クエリ ループ内で同じ名前の関数を定義していることです。ファイルを呼び出して関数を 1 回だけ作成するように、クエリ ループからこのようなものを移動する必要があります。

したがって、ループ内で毎回初期化関数を再作成する代わりに、それをループの外に移動します。代わりに、ループ内からその関数を呼び出し、異なる緯度/経度の値、div ID、および名前を毎回渡します。

body タグから初期化関数への既存の呼び出しをすべて取り除き、ウィンドウの読み込み時に google イベント リスナーを使用して、毎回異なるパラメーターを に渡しますinitialize。

次のようなもの：

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

 <script>
  var arenas = []; // array of arenas, to be populated later within the query loop
  function initialize() {
    var intArena, myLatlng, mapOptions, map, marker;

    // loop over all the arenas, creating maps and markers for each
    for (intArena = 0; intArena < arenas.length; intArena++) {
      myLatlng = new google.maps.LatLng(arenas[intArena].lat, arenas[intArena].lng);
      mapOptions = {
        zoom: 11,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById(arenas[intArena].id), mapOptions);

      marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: arenas[intArena].name
      });
    }
  }

  google.maps.event.addDomListener(window, 'load', initialize);
 </script>

<cfoutput query="arena">
  <cfif arena.agpslat is not "" and arena.agpslong is not "">
    <script>
      // add struct of arena data to the array for use later on in the initialize function
      arenas.push({
        lat: #arena.agpslat#, 
        lng: #arena.agpslong#, 
        id: 'g#arena.aid#', 
        name: '#JsStringFormat(arena.arenaname)#'
      });
    </script>

    <div id="g#arena.aid#" style="width: 600px; height: 300px;"></div>
  </cfif>  

  <div align=center>g#arena.aid#<br><b>[ <a href="arenagps.cfm?aid=#arena.aid#"><font color=cc3300>Change/Add Using Map Function</font></a> ]</b><br></div>
 </cfoutput>

また、クエリ列への参照の前にクエリ名を付けたことにも注意してください。ほとんどの場合、すべての変数のスコープを正しく設定することをお勧めします。

于 2013-02-21T17:47:47.000 に答える
-1

わかった...すべての提案のためのThx...

が必要

   <body onload="initialize()">

ColdFusion コーディング - 変数を使用して関数と mapoption の名前を変更したため、それらは常に異なります。

  <cfoutput query=arena>

  <cfif arena.agpslat is not "" and arena.agpslong is not "">

   <script type="text/javascript">
 function initialize() {
    var #arena.aid#Latlng = new google.maps.LatLng(#arena.agpslat#,#arena.agpslong#);

    var #arena.aid#Options = {
        zoom: 15,
        center: #arena.aid#Latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("g#arena.aid#"), #arena.aid#Options);

    var marker = new google.maps.Marker({
        position: #arena.aid#Latlng,
        map: map,
        title: '#arena.arenaname#'
      });

}

google.maps.event.addDomListener(window, 'load', initialize);
  </script>

  <div id="g#arena.aid#" style="width: 600px; height: 300px;"></div>



  <div align=center>g#arena.aid#<br><b>[ <a href="arenagps.cfm?aid=#arena.aid#"><font color=cc3300>Change/Add Using Map Function</font></a> ]</b><br></div>

  </cfif>

 </cfoutput>
于 2013-02-24T00:44:23.813 に答える