如何使页面上的Javascript可以使用MSSQL查询数据，而无需再次查询数据库

How to make MSSQL query data available to Javascript on a page without having to query the database again?

本文关键字：查询 数据 数据库 MSSQL 何使页 Javascript 可以使      更新时间：2023-09-26

对于我用谷歌地图API制作的页面，我需要查询多个标记位置以及有关每个标记的进一步信息。我正在使用ColdFusion来查询数据库。

我已经大致规划了这个过程应该如何工作

 <cfquery datasource="mapInfo" name="markerQuery">
  Select * from locations
 </cfquery>
<cfset arr = ArrayNew(1)>
  <cfoutput query="markerQuery">
    <cfset marker = {#markerid# = 'new google.maps.LatLng(#markerQuery.lat#,#states.lng#)'}>
    <cfset arrayAppend(arr,marker)>
  </cfoutput>
<script type="text/javascript" charset="utf-8">
  var markers = <cfoutput>#serializeJson(arr)#</cfoutput>; 
 </script>

我如何在Javascript中保留查询信息，以便我可以在单击标记(或匹配按钮)时将其显示在文本框中?

您应该做的是遍历查询，将记录集中的数据直接输出到Javascript数组中。然后在JS中使用它来循环，创建标记和信息窗口。像这样:

<script type="text/javascript">
    var arrMarkers = [];
    <cfoutput query="getData">
        arrMarkers.push({
            lat: #getData.lat#,
            lng: #getData.lng#,
            title: '#JSStringFormat(getData.title)#',
            description: '#JSStringFormat(getData.description)#'
        });
    </cfoutput>

    function initialize() { 
        var latlng, marker;
        var infowindow =  new google.maps.InfoWindow({
            content: ""
        });
        var map = new google.maps.Map(document.getElementById("map"), {
            zoom:               15,
            center:             new google.maps.LatLng(51.532315,-0.1544),
            mapTypeId:          google.maps.MapTypeId.ROADMAP
        });
        for (var i = 0; i < arrMarkers.length; i++) {
            latlng = new google.maps.LatLng(arrMarkers[i].lat, arrMarkers[i].lng);
            marker = new google.maps.Marker({
                position: latlng, 
                map: map, 
                title: arrMarkers[i].title
            });
            bindInfoWindow(marker, map, infowindow, arrMarkers[i].description);
        }
    }
    function bindInfoWindow(marker, map, infowindow, strDescription) {
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(strDescription);
            infowindow.open(map, marker);
        });
    }
</script>
相关文章：