2

卡在谷歌地图上

使用 ColdFusion - 我正在填充 Arena 的列表...如果有地图，我想要下拉地图 - 并链接以添加地图。用于填充地图并标记它的链接可以正常工作。

当我有多个条目时 - 我没有得到多个地图 - 只得到最后结果的地图显示。

我已经尝试过一些我过去使用过的其他编码 - 但仍然没有运气好使用多个地图 - 所以从这个看起来更简单的 javascript 开始。

任何帮助表示赞赏。删除旧代码 - 转到当前工作 - 只是不显示标记

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

另外 - 当我使用 style="display:none;" 使用 Google Map Div： 

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

下拉地图被窃听而不是居中。没有它——它关闭和打开都很好——但总是默认打开。

正如建议的那样 - 这是 Javascript 输出...下面是 2 个结果的输出...只有最后一个显示地图..

以下是一些进展 - 从 Google API 开始 - 这就是我所在的位置......

有一个身体负载来完成这项工作......

所有地图都正确显示......甚至添加了另一个......只是没有得到标记......我已经尝试过谷歌标记代码......还没有运气......所以只是去正确显示地图的代码......

只需要弄清楚地图标记...

    <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 文件并在查询循环中定义同名函数。您需要将这些东西移出您的查询循环，以便您只调用文件并创建一次函数。

因此，与其在循环中每次都重新创建初始化函数，不如将其移出循环。而是从循环中调用该函数，每次将不同的 lat/lng 值、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

得到......谢谢所有的建议......

需要一个

   <body onload="initialize()">

ColdFusion Coding - 使用变量重命名函数和 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 回答