一页多张地图-ColdFusion

Multiple Maps on One Page - ColdFusion

本文关键字：地图 -ColdFusion 张地图 一页      更新时间：2023-09-26

在谷歌地图上陷入困境

使用ColdFusion-我正在填充Arena的列表。。。我想要一个地图的下拉列表，如果他们有一个和链接添加地图。填充地图和标记地图的链接工作正常。

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

我已经尝试了一些我过去使用过的其他编码，但在多个映射中仍然没有成功，所以从这个看起来更容易的javascript开始。

感谢您的帮助。删除旧代码-转到当前工作的代码-只是不显示标记

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

此外，当我在谷歌地图Div:中使用style="display:none；"时

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

下拉地图被窃听，没有居中。如果没有它，它关闭和打开都很好，但总是默认为打开。

如建议-以下是Javascript输出。。。以下是2个结果的输出。。。只有最后一张显示地图。。

以下是一些进展-从谷歌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#'
     });

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

因此，与其每次在循环中重新创建初始化函数，不如将其移出循环。相反，从循环中调用该函数，每次都将不同的lat/lng值、div ID和名称传递给它。

去掉body标记中对initialize函数的任何现有调用，只需在加载窗口时使用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>

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

得到。。。谢谢大家的建议。。。

需要

   <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>
相关文章：