首页 > 解决方案 > OpenLayer - 使用 Flask 在 Popup 上显示数据

问题描述

我制作了一个 OpenLayer 地图,它使用 Flask 从 SQL 数据库中获取数据。它根据存储在数据库中的数据显示一个标记和一个弹出窗口。我想以某种方式在通过 Flask 检索的弹出窗口中显示数据,目前我只能显示一个字符串“名称”。有没有一种方法可以从mydata.gps_longitude弹出窗口中显示数据?

<html>
    <body>
        <div id="mapdiv"></div>
        <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
        <script>
            map = new OpenLayers.Map("mapdiv");
            map.addLayer(new OpenLayers.Layer.OSM());

            var aarhusLat = new OpenLayers.LonLat( 10.102390 ,56.128181 )
                .transform(
                    new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                    map.getProjectionObject() // to Spherical Mercator Projection
                );
            var zoom=11;

            var markers = new OpenLayers.Layer.Markers( "Markers" );
            map.addLayer(markers);
            map.setCenter (aarhusLat, zoom);



            var locationData = {
                gps_latitude : [{% for mydata in myIotdata %}
                    {{ mydata.gps_latitude }},
                {% endfor %}],
                gps_longitude : [{% for mydata in myIotdata %}
                    {{ mydata.gps_longitude }},
                {% endfor %}]
            }

            /* console.log(locationData.gps_latitude[0]); */

            var i;
            for (i = 0; i < locationData.gps_latitude.length; i++) {

                var aarhusLat2 = new OpenLayers.LonLat( locationData.gps_longitude[i], locationData.gps_latitude[i] )
                    .transform(
                    new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                    map.getProjectionObject() // to Spherical Mercator Projection
                );
            markers.addMarker(new OpenLayers.Marker(aarhusLat2));
                        var student = new OpenLayers.Layer.Text('GPS')

                        // A popup with some information about our location
                        var popup = new OpenLayers.Popup.FramedCloud(
                        "Popup",
                        aarhusLat2,
                        // I added a size to make it fit in the small fiddle window
                        new OpenLayers.Size(100,100),
                                "Name", // Here i would like to display the data from locationdata.
                        null,
                        true // set to true to enable a (x) button. false othervise
                    );
                    map.addPopup(popup); //Draw popup window on map.
                        map.addLayer(student);
                    }
        </script>
    </body>
</html>

目前看起来是这样的

标签: postgresqlflaskopenlayers

解决方案


推荐阅读