一页上的多个地图 - ColdFusion答案

【问题标题】：Multiple Maps on One Page - ColdFusion一页上的多个地图 - ColdFusion
【发布时间】：2013-02-24 17:59:21
【问题描述】：

卡在 Google 地图上

使用 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 开始 - 这就是我所处的位置......

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

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

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

    <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#'
     });

【问题讨论】：

您仍在不止一次地创建 initialize 函数，这意味着它仍在您的查询循环中发生。看看我在回答中的表现。
我没有得到以下建议的地图...确保也从正文中删除初始化...仍在玩...通过初始编码，我总能获得第二张地图（仅测试 2 results) - 这始终是最后一个结果。
您添加的最新代码显示不正确-您需要edit the question，选择代码，然后按代码格式按钮（一对大括号{}) 并且它将适当地格式化/转义该代码块。
Done peter... 抱歉... 将代码投入使用，让我获得适当的地图 - 现在没有标记...
实际上，一个想法（可能是也可能不是问题）：您可能想要title: '#JsStringFormat(arena.arename)#' - 否则如果名称包含撇号，它将导致无效的JS。

标签： javascript google-maps-api-3 coldfusion coldfusion-8

【解决方案1】：

问题是您正在调用 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>

另外请注意，我已在对您的查询列的引用前加上查询名称。正确确定所有变量的范围几乎总是一个好主意。

【讨论】：

No Go - All Blank... 根本没有地图... 将继续播放... 当我需要时我也会调整变量... 我的理解是当你不这样做时不要这样做不需要 - 这使您的实际代码需要更小/更快...只需快速使用您的代码 Duncan... 将继续玩...
检查 JS 错误，将生成的 JS 添加到问题中可能会很有用。范围实际上是improves performance
Duncan - 你的代码也可以工作...我会选择其中一个...现在让臭名昭著的 div style="display: none" 工作。就我的理解来说，那个有点让人头疼……

【解决方案2】：

知道了...谢谢大家的建议...

需要一个

   <body onload="initialize()">

ColdFusion 编码 - 使用变量来重命名函数和映射选项 - 所以它们总是不同的。

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

【讨论】：

很抱歉对似乎对你有用的方法投了反对票，但这不是一个很好的方法，我很惊讶它完全有效（想想你在javascript）！我将编辑我的答案，每次从正文 onload 调用具有不同参数的相同初始化函数
最后我没有将任何参数传递给initialize - 我创建了一个全局结构数组，每个结构都包含竞技场数据。然后函数简单地遍历数组，为每个添加标记和映射