自动刷新javascript无需加载整个页面
auto refresh javascript without loading whole page
我正在使用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文件代码
<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: '© ' + 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 = '© ' + 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 = '© '+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 = '© '+ 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 = '© '+ 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>
这就是AJAX/XHR请求的目的。有了它,你可以在后台获取数据,并更新你的高图/传单。下面是一个使用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 © 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(注意,它一遍又一遍地请求相同的数据,因此标记位置实际上不会改变,但我添加了一些控制台消息,以便您可以验证它的工作)您可以轻松地将此概念适应您正在尝试做的事情。
相关文章:
- 单击即显示内容而不重新加载/刷新页面
- 在页面加载/刷新时在后台运行扩展
- vue.js使用定时器自动重新加载/刷新数据
- 在浏览器上显示之前,在后台预加载/刷新页面
- Firefox DevTools:选项卡和如何在页面重新加载/刷新后保持调试器文件打开?(停止自动关闭)
- 如何使命令按钮不重新加载/刷新页面
- 更改查询字符串而不重新加载/刷新
- 以 JSON 格式重新加载/刷新页面
- 使页面元素在重新加载/刷新后保持可见
- 使用 AJAX 调用重新加载/刷新 PHP 脚本
- 如何在通过Javascript连接到facebook API时重新加载/刷新类似facebook的按钮
- 使用Javascript加载刷新图像
- Javascript只有在重新加载/刷新后才能工作
- 在通过函数将数字转换为日期并加载刷新更多数据中
- 加载刷新页面后执行Javascript代码
- 随机HTML5背景视频页面加载/刷新
- 我的chrome扩展将不会加载,直到我重新加载/刷新相同的YouTube视频页面再次
- 我如何使一个html页面可打印而无需重新加载/刷新数据
- 脚本加载随机页面的页面加载/刷新
- 在页面加载/刷新时设置容器的默认内容,然后在单击事件触发后更改