javascript - 一页上的多个 map - ColdFusion

Question

卡在 Google map 上

使用 ColdFusion - 我正在填充 Arena 的列表... 如果有 map ，我想要一个下拉列表 - 以及添加 map 的链接。用于填充 map 并对其进行标记的链接工作正常。

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

我已经尝试了一些我过去使用过的其他编码 - 但在多个 map 上仍然没有运气 - 所以从这个看起来更简单的 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>

下拉 map 有问题而且没有居中。没有它 - 它关闭和打开都很好 - 但总是默认打开。

按照建议 - 这是 Javascript 输出... 下面是 2 个结果的输出...只有最后一个显示 map ..

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

有一个 body onload 可以让这个工作...

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

只需要找出 map 标记...

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

Answer 1

问题是您正在调用 JS 文件并在查询循环中定义同名函数。您需要将这些内容移出查询循环，这样您只需调用文件并创建函数一次。

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

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