将两页与头文件和脚本合二为一

时间：2019-11-06 21:43:18

标签： javascript coldfusion

我正在尝试将两个文件合并为一个文件，或者包含一个文件，或者将所有代码放在一起。主文件是显示结果报告的表的细分。我正在尝试插入位于其上方的地图。...

当前两个页面如下所示：

enter image description here

显然是地图，下面的另一个是表格：

enter image description here

因此结果应如下所示： enter image description here

这是我们尝试结合的代码：

    <cfinclude template="../session.cfm">

   <cfscript>
        //create our filter object.
        filter = Application.ComponentFactory.CreateIncomingMessagesFilter();
        filter.AccountID = Session.Account_ID;

        if(parameterExists(Session.group_id))
        {
            filter.GroupID = Session.group_id;
        }
        else
        {
            filter.GroupID = 0;
        }

        if(IsDefined("Session.groups"))
    {
        filter.CanSeeGroups = Session.groups;
    }
    else
    {
        filter.CanSeeGroups = '';
    }

    if(IsDefined("Session.sub_groups"))
    {
        filter.CanSeeSubGroups = Session.sub_groups;
    }
    else
    {
        filter.CanSeeSubGroups = '';
    }

    //set the time zone of the currently logged in user
    filter.setTimeZone(session.TimeZone);

    //create our page rendering engine
    renderer = Application.ComponentFactory.CreateMobileRespMessagesRenderer();

    //can the logged in user manage subscribers
    renderer.setCanManageUsers(IsDefined("session.users") and session.users);

    //can the logged in user manage subscribers
    renderer.setCanSendAlerts(IsDefined("session.send") and session.send eq true);

    //set the time zone of the currently logged in user
    renderer.setTimeZone(session.TimeZone); 

    //set the calling form
    renderer.SetFormName("IncomingMessagesForm");

    //handle anything during postback
    filter.ProcessPostbackData();

    //something changed in the filter - reset the current page back to 1
    if (filter.IsFilterChanged)
    {
        renderer.Pager.CurrentPage = 1;
    }

    if(IsDefined("Session.replyTimeout"))
    {
        filter.replyTimeout = Session.replyTimeout;
    }

    //let the page renderer handle it's postback information
    renderer.ProcessPostbackData(Application.Settings);

    //load up the data based on our filter  
    renderer.SetPagedResult(filter);
    </cfscript>
     <cfmodule template="/custom_tags/PageHeader.cfm" PageTitle="Shift Coverage Results">
    <!--- render all of the page's javascript --->
    <cfset filter.RenderClientSideScript() />
    <cfset renderer.RenderClientSideScript() /> 
     </cfmodule><head><META HTTP-EQUIV="refresh" CONTENT="10"></head>


    <cfoutput>


        <form action="#Cgi.SCRIPT_NAME#" method="Post" target="_self" name="IncomingMessagesForm" id="IncomingMessagesForm">
            <input type="hidden" name="IsPostBack" value="1" />
            <!--- render the filter and page data --->

            <cfset renderer.Render(Application.Settings) />  
        </form>
    </cfoutput>

<p class="note">
    <b>Note:</b> Incoming messages containing "stop", "end", "quit", "unsubscribe" or "cancel" will place the user in inactive status. 
    <a href="/reports/user_opt_outs.cfm">See all opt-outs</a>
</p>

<cfmodule template="/custom_tags/PageFooter.cfm" />

这是映射代码：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">

        <style>
            /* Set the size of the div element that contains the map */
            #map {
                height: 100%;  /* The height is the height of the web page */
                width: 100%;  /* The width is the width of the web page */
            }

            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }

            .user_info {
                background-color: ##0000;
                font-weight: bold;
                color: #fff;
            }
        </style>

        <script src="https://maps.googleapis.com/maps/api/js?key=1234567890"></script>
        <script src="https://cdn.sobekrepository.org/includes/gmaps-markerwithlabel/1.9.1/gmaps-markerwithlabel-1.9.1.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="map"></div>

        <script type="text/javascript">
            // Initialize and add the map
            function initMap() {
                var xml_data = "<MAP>" + 
                        "<location>4000 Embassy Parkway, Akron OH 44333</location>" + 
                        "<user_info>" + 
                        "<user_name>Scott Dettling</user_name>" + 
                        "<user_lat>41.141756</user_lat>" + 
                        "<user_lon>-81.675599</user_lon>" + 
                        "<user_img>https://s3.amazonaws.com/media.wbur.org/wordpress/1/files/2015/03/AP736858445562.jpg</user_img>" +
                        "</user_info>" + 
                        "<user_info>" + 
                        "<user_name>Bill James</user_name>" + 
                        "<user_lat>41.142758</user_lat>" + 
                        "<user_lon>-81.657274</user_lon>" + 
                        "<user_img>https://s.abcnews.com/images/US/jeff-koenig-ht-ml-190122_hpEmbed_2_4x5_992.jpg</user_img>" + 
                        "</user_info>" + 
                        "<user_info>" + 
                        "<user_name>Karrie Sims</user_name>" + 
                        "<user_lat>41.135809</user_lat>" + 
                        "<user_lon>-81.639336</user_lon>" + 
                        "<user_img>https://www.odmp.org/media/image/officer/23891/orig/police-officer-natalie-corona.jpg</user_img>" + 
                        "</user_info>" + 
                        "<user_info>" + 
                        "<user_name>John Smith</user_name>" + 
                        "<user_lat>41.142855</user_lat>" + 
                        "<user_lon>-81.637319</user_lon>" + 
                        "<user_img>https://www.odmp.org/media/image/officer/24262/400/deputy-sheriff-jake-allmendinger.jpg</user_img>" + 
                        "</user_info>" + 
                        "<user_info>" + 
                        "<user_name>Jim Deek</user_name>" + 
                        "<user_lat>41.131543</user_lat>" + 
                        "<user_lon>-81.653541</user_lon>" + 
                        "<user_img>https://lawofficer.com/wp-content/uploads/2016/10/blakesnyder.jpg</user_img>" + 
                        "</user_info>" + 
                        "</MAP>";

                var parser = new DOMParser();
                var xmlDoc = parser.parseFromString(xml_data, "text/xml");
                var address = xmlDoc.getElementsByTagName("location")[0].textContent;
                var users = xmlDoc.getElementsByTagName("user_info");
                var user_list = [];

                for (var i = 0; i < users.length; i++) {
                    user_list.push({
                        "name": users[i].getElementsByTagName("user_name")[0].textContent,
                        "lat": users[i].getElementsByTagName("user_lat")[0].textContent,
                        "lng": users[i].getElementsByTagName("user_lon")[0].textContent,
                        "img": users[i].getElementsByTagName("user_img")[0].textContent
                    });
                }

                // The location of US
                var map_center = {lat: 39.8283, lng: -98.5795};
                // The map, centered at US
                var map = new google.maps.Map(document.getElementById('map'), {zoom: 3, center:  
        map_center});

                // boundary of all pins
                var bounds = new google.maps.LatLngBounds();

                // converts address into geolocation with lat and lng
                geocoder = new google.maps.Geocoder();
                codeAddress(geocoder, map, address);

                // adds user_info marker
                for (const index in user_list) {
                    lat = parseFloat(user_list[index]["lat"]);
                    lng = parseFloat(user_list[index]["lng"]);

                    var point = {lat: lat, lng: lng}
                    var lbl_content = "<div style='text-align: center;'><div><img src='" + 
                            user_list[index]["img"] + 
                            "' width='30px' height='38px' style='border: 2px solid #000; display: block;
             margin: 0 auto;'></div>" + 
                            "<div style='background-color: #000; padding: 2px;'>" + 
                            user_list[index]["name"] + 
                            "</div></div>";
                    var marker = new MarkerWithLabel({
                        position: point,
                        icon: {
                            url: "./res/police_pin.png",
                            scaledSize: new google.maps.Size(40, 40)
                        },
                        map: map,
                        title: user_list[index]["name"],
                        labelContent: lbl_content,
                        labelAnchor: new google.maps.Point(0, 0),
                        labelClass: "user_info",
                        labelInBackground: true
                    });

                    // extends boundary
                    bounds.extend(point);

                    // shows coordinate tooltip with 4-decisions
                    var infowindow = new google.maps.InfoWindow({
                        content: lat.toFixed(4) + ", " + lng.toFixed(4)
                    });
                    infowindow.open(map, marker);
                }

                // fits map
                map.fitBounds(bounds);
            }

            /////////////////////////////////////////
            /// converts address into geolocation ///
            /////////////////////////////////////////
            function codeAddress(geocoder, map, address) {
                geocoder.geocode({'address': address}, function (results, status) {
                    if (status === 'OK') {
                        // relocates the map centered at address pin
        //                        map.setCenter(results[0].geometry.location);

                        var marker = new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location,
                            icon: {url: "./res/911_call.png", scaledSize: new google.maps.Size(55, 55)}
                        });

                        // shows coordinate tooltip with 4-decisions
                        lat = results[0].geometry.location.lat();
                        lng = results[0].geometry.location.lng();
                        var infowindow = new google.maps.InfoWindow({
                            content: lat.toFixed(4) + ", " + lng.toFixed(4)
                        });
                        infowindow.open(map, marker);
                    } else {
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });
            }

            ////////////////////////////
            /// reads local xml file ///
            ////////////////////////////
            function readTextFile(file)
            {
                var allText = "";
                var rawFile = new XMLHttpRequest();
                rawFile.open("GET", file, false);
                rawFile.onreadystatechange = function ()
                {
                    if (rawFile.readyState === 4)
                    {
                        if (rawFile.status === 200 || rawFile.status == 0)
                        {
                            allText = rawFile.responseText;
                        }
                    }
                }
                rawFile.send(null);
                return allText;
            }

            initMap();
        </script>
    </body>
</html>

我已经尝试合并几天了，我知道可能很简单。即使睁开眼睛就能看到我所缺少的东西。

感谢您的所有帮助！

0 个答案:

没有答案
相关问题
最新问题