Question

我正在使用highcharts和传单，我希望我的脚本每10次刷新一次，而不刷新整个页面。我用我的highcharts php文件成功完成了这项工作，但是当我对我的传单脚本执行相同操作时，没有任何反应，地图也不会出现。我认为问题是函数的使用，但为什么它适用于highcharts，而不适用于传单。

这里的高图php文件代码

<div id="nb_tweets" style="width:100%; height:400px;"></div>

<script>

    $(function myFunction() 
    {
        <?php include 'import_nb_tweets.php'; ?>
        <?php include 'import_nb_users.php'; ?>

        $('#nb_tweets').highcharts(
        {
            chart: 
            {
                type: 'line'
            },
            title: 
            {
                text: 'Number of tweets trend'
            },
            xAxis: 
            {
                categories: x_axis
            },
            yAxis: 
            {
                title: 
                {
                    text: 'Number of tweets'
                }
            },
            series: 
            [
                {
                    name: 'Precise geolocation',
                    data: nb_precise
                }
                , 
                {
                    name: 'Associated geolocation',
                    data: nb_associated
                }, 
                {
                    name: 'All tweets',
                    data: nb_total
                }
            ]
        });

        setTimeout(myFunction, 10000);

    });

</script>

这是传单的php文件代码

＆＃13;

<div id="map" style="width: 1300px; height: 650px"></div>
    		
<script>
    		
    $(function myFunction() {
       
        // Inclusion of database variables
        
            <?php include 'importDB_heat.php'; ?>
            <?php include 'importDB2.php'; ?>
            <?php include 'importDB3.php'; ?>

            
        // Definition of the map variable and the default parameters
        
            var map = new L.map('map', {fullscreenControl: true, fullscreenControlOptions: {position: 'topleft'}}).setView([53.350596, -6.303142], 14);
        
            mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
            
            L.tileLayer
            (
                'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
                {
                    attribution: '&copy; ' + mapLink + ' Contributors',
                    maxZoom: 18,
                }
            ).addTo(map);
            
        
        // Definition of separate layers for markers and heat map and for precise and associated geolocation
        
            var heat_layer_place = new L.LayerGroup();
            var heat_layer_precise = new L.LayerGroup();
            
            var precise_layer = new L.LayerGroup();
            var associated_layer = new L.LayerGroup();
        
        
        // Insertion (and defintion) of cluster groups in the markers layers
        
            var markers_precise = new L.MarkerClusterGroup();
            markers_precise.addTo(precise_layer);
            
            var markers_associated = new L.MarkerClusterGroup();
            markers_associated.addTo(associated_layer);
        
        
        // Loading (and definition) of different icons for every marker layer - 
        
            var blueBird = L.icon({iconUrl: 'twitter_logo_blue.png', iconSize:[45,45], iconAnchor:[23,23], popupAnchor:[0,-19]});
            var redBird = L.icon({iconUrl: 'twitter_logo_red.png', iconSize:[40,40], iconAnchor:[23,23], popupAnchor:[0,-19]});
            
        
        // Insertion of heat layers on the map
        
            var heat_place = L.heatLayer(quakePoints_place,{radius: <?php include 'par_map_rad.php'; ?>, blur: <?php include 'par_map_blur.php'; ?>, maxZoom: <?php include 'par_map_maxzoom.php'; ?>, }).addTo(map).addTo(heat_layer_place);
            var heat_precise = L.heatLayer(quakePoints_precise,{radius: <?php include 'par_map_rad.php'; ?>, blur: <?php include 'par_map_blur.php'; ?>, maxZoom: <?php include 'par_map_maxzoom.php'; ?>, }).addTo(map).addTo(heat_layer_precise);
        
        
        // Implementation (and insertion) of markers layers on the map
        
            var nb_points = tweet_position.length;
            
            for (var iter = 0; iter < nb_points; iter++) 
            {
                markers_precise.addLayer(L.marker(tweet_position[iter],{title: tile_precise[iter], opacity: <?php include 'par_map_precise_op.php'; ?>, icon: blueBird}).bindPopup(texte_precise[iter]));
            }
            
            var nb_points_bis = tweet_place.length;
            
            for (var iter = 0; iter < nb_points_bis; iter++) 
            {
                markers_associated.addLayer(L.marker(tweet_place[iter],{title: tile_place[iter], opacity: <?php include 'par_map_associated_op.php'; ?>, icon: redBird}).bindPopup(texte_place[iter]));
            }
            
            map.addLayer(markers_precise);
            map.addLayer(markers_associated);
            
        
        // Definition (and insertion) of basic optional layers for the map
        
            var osmLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
            var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
            var osmAttrib = '&copy; ' + osmLink + ' Contributors';
            var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib});
            
            var thunLink = '<a href="http://thunderforest.com/">Thunderforest</a>';
            var	landUrl = 'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png';
            var thunAttrib = '&copy; '+osmLink+' Contributors & '+thunLink;
            var landMap = L.tileLayer(landUrl, {attribution: thunAttrib});
            
            var EWI = '<a href="http://www.esri.com/">Esri</a>';
            var EWIUrl = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
            var EWIAttrib = '&copy; '+ EWI +'i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community';
            var EWIMap = L.tileLayer(EWIUrl, {attribution: EWIAttrib});
            
            var transport = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
            var transportUrl = 'http://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png';
            var translink = '<a href="http://thunderforest.com/">Thunderforest</a>';
            var transportAttrib = '&copy; '+ transport +' Contributors & '+translink;
            var transportMap = L.tileLayer(transportUrl, {attribution: transportAttrib});
        
            var baseLayers = {"OSM Mapnik": osmMap,"Landscape": landMap, "Esri World Imagery": EWIMap, "Transport": transportMap};
            var overlays = {"Tweet location: precise geolocation": precise_layer, "Tweet location: associated geolocation": associated_layer, "Tweet density: associated geolocation": heat_layer_place, "Tweet density: precise geolocation": heat_layer_precise};
            L.control.layers(baseLayers,overlays).addTo(map);
            
            
        // Restriction of the result area of the search tool
            
            var southWest = L.latLng(<?php include 'par_dublin_lat_SW.php'; ?>, <?php include 'par_dublin_long_SW.php'; ?>);
            var	northEast = L.latLng(<?php include 'par_dublin_lat_NE.php'; ?>, <?php include 'par_dublin_long_NE.php'; ?>);
            var	boundsOSM = L.latLngBounds(southWest, northEast);
            var optionsOSM = {bounds: boundsOSM};
            
        
        // Insertion of the place search tool
        
            var osmGeocoder = new L.Control.OSMGeocoder(optionsOSM);
            map.addControl(osmGeocoder);
          
            setTimeout(myFunction, 10000);

    });
            
</script>

＆＃13;

Answer 1

这就是AJAX / XHR的要求。有了它，您可以在后台获取数据并使用它更新您的highcharts /传单。以下是使用AJAX / XHR可以做的一个例子：

从一个简单的地图和一个用于存储标记的组开始：

var map = L.map('leaflet', {
    'center': [0, 0],
    'zoom': 0,
    'layers': [
         L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
             'attribution': 'Map data &copy; OpenStreetMap contributors'
         })
    ]
});

var group = new L.LayerGroup().addTo(map);

使用jQuery的$ .getJSON（一个用JSON数据预先形成XHR GET请求的函数），您可以在后台请求数据并在当前地图中使用它。我将在评论中解释代码：

// Function for handling data
function handle(response) {
  // Empty the current layergroup
  group.clearLayers();
  // Loop over the newly retreived array
  response.forEach(function(value) {
    // Add new marker to the group
    group.addLayer(new L.Marker(value));
  });
}

// Function for requesting new data
function request() {
  // Fetch url and execute handle function on success
  $.getJSON('coordinates.json', handle);
}

// Immediately request new data
request();
// Request new data every ten seconds
setInterval(request, 10000);

这里有一个关于Plunker的工作示例：http://plnkr.co/edit/qasIC2?p=preview（请注意，它会一遍又一遍地请求相同的数据，因此标记位置实际上并没有改变，但我添加了一些控制台消息，以便您可以验证它是否有效）您可以轻松地将此概念调整为您要执行的操作。

自动刷新javascript而不加载整个页面

1 个答案: