2015-02-13 2 views
-1

У меня есть веб-сайт погоды, который пропускает данные о молнии. Я нашел источник данных от Blitzortung.org, в котором содержится информация о Lat, Lon и времени удара молнии. Как получить это на Картах Google. Я хочу, чтобы данные были в реальном времени, как на blitzortung.org. Он должен отображаться на карте, предпочтительно в виде красной или желтой точки, меняя цвет по мере его возраста (возможно, функцию javascript или PHP, которая может редактировать css, чтобы сделать это) и отключение в нужном месте. Я, к сожалению, не имел опыта работы с json и SQL, но не называю меня ленивым, потому что у меня нет времени, чтобы действительно это узнать. Я получил карту и обновление Wich радар наложения каждые 5 минут: http://met.nl.eu.org/radar.htmlданные молнии на картах google

это источник данных: http://www.lightningmaps.org/live/ я могу использовать этот источник, при условии, что я не буду использовать его для получения прибыли, и что я могу добавить ссылку to Blitzortung.org

Итак, мой главный вопрос: как мне получить карты Google, чтобы интерпретировать координаты в файле JSON как места на карте и нарисовать маркер на месте, который изменяет цвет по мере его возраста?

сервер:

Ubuntu с Apache, базы данных SQL, PHP5 и питона для обработки изображений


Edit: этот сценарий может помочь немного больше:

// 
// 
// 
var maps = { 
    0: { "west": -180.0, "east": 180.0, "north": 90.0, "south": -60.0, "projection": 1, "width": 925, "height": 925, "strike_type": 0, "detector_type": 0, region: 0 }, 
10: { "west": -20.0, "east": 44.0, "north": 71.5, "south": 23.1, "projection": 1, "width": 925, "height": 925, "strike_type": 0, "detector_type": 2, region: 1 }, 
11: { "west": 0.0, "east": 35.0, "north": 71.5, "south": 48.5, "projection": 1, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 1 }, 
12: { "west": -15.0, "east": 7.0, "north": 60.0, "south": 47.0, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 1 }, 
13: { "west": -12.0, "east": 20.0, "north": 56.0, "south": 33.6, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 1 }, 
14: { "west": 12.0, "east": 37.0, "north": 48.0, "south": 28.5, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 1 }, 
15: { "west": 10.0, "east": 30.0, "north": 56.0, "south": 43.1, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 1 }, 
16: { "west": 2.0, "east": 18.0, "north": 55.5, "south": 45.3, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 1 }, 
20: { "west": 110.0, "east": 180.0, "north": 10.0, "south": -51.6, "projection": 0, "width": 925, "height": 925, "strike_type": 0, "detector_type": 2, region: 2 }, 
21: { "west": 156.0, "east": 186.0, "north": -25.0, "south": -48.8, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 2 }, 
22: { "west": 135.0, "east": 159.0, "north": -24.0, "south": -43.8, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 2 }, 
30: { "west": -130.0, "east": -60.0, "north": 62.5, "south": 2.3, "projection": 1, "width": 925, "height": 925, "strike_type": 0, "detector_type": 2, region: 3 }, 
31: { "west": -108.0, "east": -92.0, "north": 38.0, "south": 24.3, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 3 }, 
32: { "west": -92.0, "east": -76.0, "north": 36.0, "south": 24.0, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 3 }, 
33: { "west": -85.0, "east": -70.0, "north": 46.0, "south": 34.5, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 3 }, 
34: { "west": -105.0, "east": -85.0, "north": 50.0, "south": 35.3, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 3 }, 
35: { "west": -127.0, "east": -105.0, "north": 45.0, "south": 27.3, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 3 }, 
36: { "west": -86.0, "east": -60.0, "north": 31.0, "south": 6.4, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 3 }, 
40: { "west": 85.0, "east": 155.0, "north": 58.0, "south": -4.5, "projection": 1, "width": 925, "height": 925, "strike_type": 0, "detector_type": 2, region: 4 }, 
41: { "west": 125.0, "east": 148.0, "north": 46.3, "south": -5.0, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 4 }, 
50: { "west": -102.0, "east": -22.0, "north": 16.0, "south": -57.0, "projection": 1, "width": 925, "height": 925, "strike_type": 0, "detector_type": 2, region: 5 }, 
51: { "west": -84.0, "east": -63.0, "north": 16.0, "south": 28.0, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 5 }, 
60: { "west": -25.0, "east": 60.0, "north": 40.0, "south": -38.5, "projection": 0, "width": 925, "height": 925, "strike_type": 0, "detector_type": 2, region: 6 }, 
61: { "west": 14.0, "east": 34.0, "north": -20.0, "south": -37.5, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 6 } 
}; 

var map = maps [page_0]; 

var Kreis_green  = new Image(); 
Kreis_green.src  = "../../Images/Kreis_green.png"; 
var Kreis_gray  = new Image(); 
Kreis_gray.src  = "../../Images/Kreis_gray.png"; 
var D_g    = new Image(); 
D_g.src    = "../../Images/Antenne_green.png"; 
var D_r    = new Image(); 
D_r.src    = "../../Images/Antenne_gray.png"; 
var S_g    = new Image(); 
S_g.src    = "../../Images/Lautsprecher_green.png"; 
var S_r    = new Image(); 
S_r.src    = "../../Images/Lautsprecher_gray.png"; 

var audiocnt= 0; 
var audiocntmax= 10; 
var AudioData= 'data:audio/x-wav;base64,UklGRlQOAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YTAOAAAAAAAA//8CAP7/AQAAAP7/AwD+/wEA//8BAP//AQAAAP//AQAAAP//AQAAAAAAAAAAAP//AwD8/wUA+v8GAPv/BAD9/wEAAQD+/wIA/////wIA/v8CAP//AAD//wIA//8BAP7/AgD+/wMA/f8CAP//AQD+/wIA/v8DAP3/AgD+/wIA//8AAAAAAAABAP//AAAAAAAAAQD//wAAAAABAP//AAABAP7/AgD/////AgD//wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//8CAP7/AgD+/wIA/v8CAP7/AgD+/wIA/v8CAP7/AgD+/wIA/v8CAP7/AgD+/wMA/P8EAP3/AgAAAP7/AwD9/wIAAAD+/wQA+/8EAP3/AgAAAP//AAABAP7/AwD+/wAAAQD//wEA//8BAP//AQAAAP7/AwD+/wAAAgD9/wIAAAD+/wMA/f8CAP//AQD//wAAAQD//wEA//8AAAIA/f8DAP3/AgD//wEA//8BAP//AAACAP3/BAD7/wUA/P8EAPz/AwD+/wEAAAD//wIA/f8EAPv/BQD7/wUA/P8DAP7/AQD//wEAAAD//wIA/f8DAP7/AQD//wEA//8BAP//AAABAP//AQD//wEA/v8DAP3/AwD+/wAAAAABAP//AQD/////AwD9/wIA/////wIA//8AAAEA/v8CAP//AAABAP//AQD//wAAAQD+/wMA/P8FAPv/AwD/////AwD8/wQA/f8BAAEA/f8FAPr/BgD6/wYA+/8EAPz/AwD//wAAAQD+/wEAAQD+/wIA/v8CAP//AAABAP7/AgD//wEA//8BAP7/AgD//wEA//8AAAEA//8BAP//AAABAAAA//8AAAEA//8BAP//AAAAAAEA/v8DAPz/AwD+/wEAAAAAAP//AgD9/wMA/v8BAAAAAAAAAP//AgD+/wIA/////wIA//8AAAEA/v8CAP7/AgD//wAAAQD9/wQA/P8EAP3/AQAAAAAAAAAAAAAAAAAAAAEA/v8CAP//AAABAP7/AgD+/wMA/P8DAP////8CAP7/AQABAP3/BAD7/wUA/f8BAAAAAAD//wIA/f8DAP7/AgD+/wIA/f8EAP3/AQAAAAAAAAAAAAAA/v8DAP7/AQAAAP//AAABAP//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iQA0ADUAcgCGAJAAvwClAEMANAB6AKUAhwCiANMAhwAdAP7/AQABAP7/AQAAAAAAAAD//wEAAAAAAAAAAAAAAP//AgD+/wMA/f8CAP7/AgD//wAAAQD+/wIA/v8CAP7/AQAAAP//AQD//wEA//8BAP//AQD//wEA//8BAP//AQAAAAAA//8BAP//AgD//wAA//8CAP7/AgD+/wIA/v8CAP//AAAAAAAAAAAAAAIA/P8EAP3/AQABAP////8DAPz/BAD8/wMA/v8CAP7/AQD//wEA//8CAP3/AwD9/wMA/f8DAP3/AgAAAP7/AwD9/wEAAQD+/wMA/f8CAP//AAABAP7/AwD9/wIA//8AAAAAAAABAP7/AwD8/wMA//8BAP7/AgD+/wEAAAD//wIA/v8BAP//AQD//wIA/f8DAP7/AAACAP3/AgAAAP//AgD9/wIAAAD+/wQA+/8FAPz/AgD//wEA//8CAP3/AgD//wAAAgD8/wQA/P8FAPv/BQD6/wYA/P8DAP7/AQAAAP//AgD9/wQA/f8BAAAAAAAAAAAAAAD//wIA/v8BAAAA//8CAP3/BAD8/wMA/v8BAP//AgD+/wEAAAD+/wQA/P8EAPz/BAD8/wMAAAD+/wIA//8AAAEA//8AAAEA//8BAAAA//8BAP//AgD/////AgD+/wEAAAAAAP//AgD9/wIAAAD//wAAAQD//wAAAgD8/wQA/v8AAAIA/f8DAP3/AwD9/wMA/f8DAP3/AgD//wAAAQD+/wMA/P8EAP3/AgD//wAAAQD+/wMA/f8CAP//AAABAP//AQD+/wIA//8AAAEA/v8CAP//AAAAAAAAAAABAP////8BAAAAAAAAAAAAAAD//wIA/v8CAP//AAAAAAAAAQD+/wMA/P8EAP3/AgD//wAAAQD+/wIA//8AAAEA/v8DAPz/BAD8/wQA/f8CAP//AAABAP7/AgD//wEA//8AAAAAAQD//wEA/v8CAP//AQD//wEA//8BAP//AQD//wIA/f8DAP7/AQAAAP//AQAAAAAAAAAAAP//AwD8/wQA/f8CAP//AAAAAAAAAQD+/wIA/////wIA/v8BAAAA//8CAP3/BAD7/wUA/P8CAAAA//8CAP3/AwD+/wAAAgD9/wMA/v8AAAEA//8BAP//AQD//wEA//8AAAEA//8BAAAA/v8DAP3/AwD+/wEAAAAAAAAAAQD9/wQA/P8EAP3/AgD+/wEAAQD+/wMA/P8EAP3/AgD//wAAAAAAAAAAAQD+/wIA/////wIA/v8DAP3/AgD+/wEAAQD+/w=='; 
var myAudio = new Array (new Audio(AudioData), 
         new Audio(AudioData), 
         new Audio(AudioData), 
         new Audio(AudioData), 
         new Audio(AudioData), 
         new Audio(AudioData), 
         new Audio(AudioData), 
         new Audio(AudioData), 
         new Audio(AudioData), 
         new Audio(AudioData)); 

var DetectorImages  = new Array(new Image(),new Image(),new Image()); 
DetectorImages [0].src = "../Images/d00g.png"; 
DetectorImages [1].src = "../Images/d02g.png"; 
DetectorImages [2].src = "../Images/d03g.png"; 

var DetectorImage  = DetectorImages [map ['detector_type']]; 

var StrokeImages  = new Array(new Image(),new Image(),new Image(),new Image(),new Image(),new Image(),new Image(),new Image()); 
StrokeImages [0].src = "../Images/s02.png"; 
StrokeImages [1].src = "../Images/s03.png"; 
StrokeImages [2].src = "../Images/s04.png"; 
StrokeImages [3].src = "../Images/s05.png"; 
StrokeImages [4].src = "../Images/s06.png"; 
StrokeImages [5].src = "../Images/s07.png"; 
StrokeImages [6].src = "../Images/s09.png"; 
StrokeImages [7].src = "../Images/s99.png"; 

var Buffer   = new Image(); 
var Background  = document.getElementById('lb'); 
var Canvas   = document.getElementById('Bild_Canvas'); 
var Context   = Canvas.getContext('2d'); 
var Delay    = document.getElementById('Delay'); 
var Strikes   = document.getElementById('Strikes'); 
var Detectors   = document.getElementById('Detectors'); 
var Sound    = document.getElementById('Sound'); 

Delay.innerHTML = 'waiting'; 

var Type    = 0; 
if (parseInt(page_0/10)*10 == page_0) { 
    Type= 1; } 

var first_Stroke  = 0; 
var display_Strikes = true; 
var display_Detectors = false; 
var use_Sound   = false; 

if (read_Cookie ('displayStrikes') != undefined) { 
    display_Strikes = eval(read_Cookie ('displayStrikes')); } 
if (read_Cookie ('displayDetectors') != undefined) { 
    display_Detectors = eval(read_Cookie ('displayDetectors')); } 
if (read_Cookie ('useSound') != undefined) { 
    use_Sound = eval(read_Cookie ('useSound')); } 

var Server; 
try { 
    // Mozilla, Opera, Safari sowie Internet Explorer (ab v7) 
    xmlHttp = new XMLHttpRequest(); } 
catch(e) { 
    try { 
    // MS Internet Explorer (ab v6) 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } 
    catch(e) { 
    try { 
     // MS Internet Explorer (ab v5) 
     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } 
    catch(e) { 
     xmlHttp = null; 
     xmlHttp2 = null; } } } 

var Stations; 
if (xmlHttp) { 
    xmlHttp.onreadystatechange = function() { 
     if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) { 
     Stations= eval('(' + xmlHttp.responseText + ')'); 
     for (var s in Stations) { 
      Stations[s][1]= projection_x (map["west"],map["east"],map["width"],Stations[s][1]); 
      if (map['projection'] == 0) { 
      Stations[s][0]= mercator_y (map["west"],map["east"],map["north"],map["height"],Stations[s][0]); } 
      else { 
      Stations[s][0]= miller_y (map["west"],map["east"],map["north"],map["height"],Stations[s][0]); } } } } 
    xmlHttp.open('GET', '/Data/stations.json', true); 
    xmlHttp.send(null); 
} 

/****************************************************************/ 
/****************************************************************/ 
/****************************************************************/ 

function load() 
{ 
} 

setInterval(newBackground,63000); 
setInterval(drawStrikes,49); 

if (display_Strikes) { 
    Strikes.src= Kreis_green.src; } 
else { 
    Strikes.src= Kreis_gray.src; } 
if (display_Detectors) { 
    Detectors.src= D_g.src; } 
else { 
    Detectors.src= D_r.src; } 
if (use_Sound) { 
    Sound.src= S_g.src; } 
else { 
    Sound.src= S_r.src; } 

var ws; 

if ("WebSocket" in window) { 

    var rnd; 
    try { 
    rnd= parseInt (Math.random()*10); 
    Delay.innerHTML = 'first try'; 
    ws = new WebSocket("ws://websocketserver.blitzortung.org:801"+rnd); } 
    catch (e) { 
    rnd= parseInt (Math.random()*10); 
    Delay.innerHTML = 'second try'; 
    ws = new WebSocket("ws://websocketserver.blitzortung.org:801"+rnd); } 

    Delay.innerHTML = 'connected'; 

    ws.onopen = function() 
    { 
     var start_time= (Date.now()*1000000)-60000000000; 
     ws.send('{"west":'+map['west']+',"east":'+map['east']+',"north":'+map['north']+',"south":'+map['south']+',"time":'+start_time+'}'); 
    }; 

    ws.onmessage = function (evt) 
    { 
     var Strikes= eval('('+evt.data+')'); 

     if (('ddelay' in Strikes) && 
      ('lat' in Strikes) && 
      ('lon' in Strikes) && 
      ('sta' in Strikes) && 
      ('dev' in Strikes)) { 

     if ((map ['west'] <= Strikes ['lon']) && 
      (Strikes ['lon'] <= map ['east']) && 
      (map ['south'] <= Strikes ['lat']) && 
      (Strikes ['lat'] <= map ['north'])) { 

      var Image; 
      if (map['strike_type'] == 0) { 
      Image= StrokeImages[parseInt(Math.random()*6)]; 
      } 
      else if (map['strike_type'] == 1) { 
      Image= StrokeImages[6]; 
      } 
      else { 
      Image= StrokeImages[7]; 
      } 

      var Detectors = new Array(); 
      if (display_Detectors) { 
      for (var s in Strikes ['sta'][1]) { 
       var d=Strikes ['sta'][1][s]; 
       var Detector = new Array(Stations [d][0],Stations [d][1]) 
       Detectors.push(Detector); 
       if (Detectors.length >= 100) { 
       Detector.shift(); 
       } 
      } 
      } 

      var x= projection_x (map["west"],map["east"],map["width"],Strikes ['lon']); 
      var y= projection_y (map["west"],map["east"],map["north"],map["height"],Strikes ['lat'],map['projection']); 

      var Datum = new Date(); 
      var Time  = Datum.getTime(); 
      first_Stroke = new Stroke (Context,x,y,Image,Detectors,Strikes ['sta'][0],Time,first_Stroke,Strikes ['dev']); 
      if (use_Sound) { 
      myAudio [audiocnt++].play(); 
      if (audiocnt >= audiocntmax) { 
       audiocnt= 0; 
      } 
      } 

      Delay.innerHTML = 'Delay: '+Strikes['delay']+' s'; 
     } 
     } 
     else if (('delay' in Strikes) && 
       ('latitude' in Strikes) && 
       ('longitude' in Strikes) && 
       ('signals_used' in Strikes) && 
       ('deviation' in Strikes)) { 
     if ((map ['west'] <= Strikes ['longitude']) && 
      (Strikes ['longitude'] <= map ['east']) && 
      (map ['south'] <= Strikes ['latitude']) && 
      (Strikes ['latitude'] <= map ['north'])) { 

      var Image; 
      if (map['strike_type'] == 0) { 
      Image= StrokeImages[parseInt(Math.random()*6)]; 
      } 
      else if (map['strike_type'] == 1) { 
      Image= StrokeImages[6]; 
      } 
      else { 
      Image= StrokeImages[7]; 
      } 

      var Detectors = new Array(); 
      if (display_Detectors) { 
      for (var s in Strikes ['signals_used']) { 
       var d= Strikes ['signals_used'][s]; 
       var Detector = new Array(Stations [d][0],Stations [d][1]) 
       Detectors.push(Detector); 
       if (Detectors.length >= 1000) { 
       Detector.shift(); 
       } 
      } 
      } 

      var x= projection_x (map["west"],map["east"],map["width"],Strikes ['longitude']); 
      var y= projection_y (map["west"],map["east"],map["north"],map["height"],Strikes ['latitude'],map['projection']); 

      var Datum = new Date(); 
      var Time  = Datum.getTime(); 
      first_Stroke = new Stroke (Context,x,y,Image,Detectors,0,Time,first_Stroke,Strikes ['deviation']); 
      if (use_Sound) { 
      myAudio [audiocnt++].play(); 
      if (audiocnt >= audiocntmax) { 
       audiocnt= 0; 
      } 
      } 

      Delay.innerHTML = 'Delay: '+Strikes['delay']+' s'; 
     } 
     } 
    }; 

ws.onclose = function() 
    { 
    }; 

} 
else { 
    alert("WebSocket NOT supported by your Browser!"); } 

function unload() 
{ 
} 

function StrikesOnOff() 
{ 
    if (display_Strikes) { 
    Strikes.src= Kreis_gray.src; 
    display_Strikes= false; } 
    else { 
    Strikes.src= Kreis_green.src; 
    display_Strikes= true; } 
    write_Cookie('displayStrikes', display_Strikes, 365); 
} 

function DetectorsOnOff() 
{ 
    if (display_Detectors) { 
    Detectors.src= D_r.src; 
    display_Detectors= false; } 
    else { 
    Detectors.src= D_g.src; 
    display_Detectors= true; } 
    write_Cookie('displayDetectors', display_Detectors, 365); 
} 

function SoundOnOff() 
{ 
    if (use_Sound) { 
    Sound.src= S_r.src; 
    use_Sound= false; } 
    else { 
    Sound.src= S_g.src; 
    use_Sound= true; } 
    write_Cookie('useSound', use_Sound, 365); 
} 

function newBackground() 
{ 
    var Datum = new Date(); 
    var Time  = Datum.getTime(); 
    var t  = Math.ceil(Time/60000); 
    Buffer.src= Bild_url+'?t='+String(t++); 
    Buffer.onload= function() { 
    Canvas.style.backgroundImage= "url(" + this.src + ")"; } 
} 

function drawStrikes() 
{ 
    var Datum = new Date(); 
    var Time  = Datum.getTime(); 

    Context.clearRect(0,0,Canvas.width,Canvas.height) 

    var s = first_Stroke; 
    while (s != 0) { 
    if (s.Time > Time-600000) { 
     s.draw(); 
     s= s.next; } 
    else { 
     s.next = 0; 
     s = 0; } } 
} 

function Stroke (Context, x, y, Image, Detectors, st_used, Time, Next, Deviation) 
{ 
    this.Context   = Context; 
    this.Context.lineWidth = 1.0; 
    this.x     = parseInt(x); 
    this.y     = parseInt(y); 
    this.Image    = Image; 
    this.Detectors   = Detectors; 
    this.st_used   = st_used; 
    this.Time    = Time; 
    this.next    = Next; 
    this.deviation   = Deviation; 
    this.cnt    = 0; 
    this.ray_cnt   = 40; 
    this.detector_cnt  = 200; 
}; 

Stroke.prototype = 
{ 
    draw: 
    function() 
    { 
     var alpha1= (this.ray_cnt-this.cnt)/10; 
     if (alpha1 > 1) { 
     alpha1 = 1; } 
     var alpha2= alpha1*0.7; 

     if (this.cnt < this.detector_cnt) { 
     if ((display_Detectors)&&(this.Detectors.length > 0)) { 
      for (var i=this.st_used; i<this.Detectors.length; i++) { 
      var y = this.Detectors[i][0]; 
      var x = this.Detectors[i][1]; 
      if (this.cnt < this.ray_cnt) { 
       this.Context.beginPath() 
       this.Context.moveTo(this.x,this.y); 
       this.Context.lineTo(x,y); 
       this.Context.strokeStyle= 'rgba(0,255,128,'+alpha2.toString()+')'; 
       this.Context.stroke(); } 
      this.Context.drawImage(DetectorImage,parseInt(x-DetectorImage.width/2),parseInt(y-DetectorImage.height/2)); } 
      for (var i=0; i<this.st_used; i++) { 
      var y = this.Detectors[i][0]; 
      var x = this.Detectors[i][1]; 
      if (this.cnt < this.ray_cnt) { 
       this.Context.beginPath() 
       this.Context.moveTo(this.x,this.y); 
       this.Context.lineTo(x,y); 
       this.Context.strokeStyle= 'rgba(64,192,255,'+alpha2.toString()+')'; 
       this.Context.stroke(); } 
      this.Context.drawImage(DetectorImage,parseInt(x-DetectorImage.width/2),parseInt(y-DetectorImage.height/2)); } } 

     if (display_Strikes) { 
      this.Context.beginPath(); 
      this.Context.arc(this.x,this.y,this.cnt,0,2*Math.PI,1); 
      this.Context.strokeStyle= 'rgba(255,255,255,'+alpha1.toString()+')'; 
      this.Context.stroke(); } } 

     this.Context.drawImage(this.Image,parseInt(this.x-this.Image.width/2),parseInt(this.y-this.Image.height/2)); 

     if (this.cnt < this.detector_cnt) { 
     this.cnt++; } 
    }, 
} 

Просто проигнорируйте аудио часть, так как она мне не понадобится.


Редактировать: Я изменил свои потребности. Первый приоритет - получить молнии в нужном месте. Изменение цвета и прочее может возникнуть в более поздней стадии разработки, но на данный момент данные на карте прекрасны. Все, что ценится

+3

На самом деле это не тот вопрос, который нам нравится, потому что он не показывает попытку сделать то, о чем вы просите, и не показывая какой-то код, мы не знаем, что такое ваш опыт кодирования. Поэтому ** ваш вопрос может быть закрыт **. Кроме того, ваш вопрос довольно расплывчатый и отсутствует какая-то информация. Имеете ли вы право использовать эти данные; в других терминах, является ли он общедоступным? Нужно ли вам регулярно обновлять данные?Вы хотите импортировать его в свою собственную базу данных? Как вы хотите отображать его на своей карте? и т. д. Обновите свой вопрос с дополнительной информацией. – MrUpsidown

+0

Довольно сложно доказать, что я пытаюсь сделать попытку, потому что у меня нет абсолютно никакого опыта работы с json и SQL. Я много googled, и я загрузил код, который может отображать молнию на карте, но я не очень понимаю, что он делает. То, что я знаю, будет описано в. –

+0

У вас есть карта вообще? Вы знаете, как использовать API? – MrUpsidown

ответ

0

1) Создание PHP скрипт, который будет открывать и читать JSON из живого URL:

Файл: get_lightnings.php

<?php 

header('Content-Type: application/json'); 
echo file_get_contents("http://www.lightningmaps.org/live/"); 

?> 

Это будет читать и эхо JSON.

2) Запросите этот URL-адрес с помощью javascript с помощью AJAX. Вот пример карты скрипт, который запрашивает файл PHP с jQuery.ajax() и создать маркер для каждой молнии:

function initialize() { 

    var mapOptions = { 
     zoom: 2, 
     center: new google.maps.LatLng(0, 0), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 

    $.ajax({ 
     dataType: "json", 
     url: "relative/path/to/get_lightnings.php" 
    }).done(function (data) { 

     data.d.forEach(function (lightning) { 

      new google.maps.Marker({ 
       position: new google.maps.LatLng(lightning.lat, lightning.lon), 
       map: map, 
       title: 'Lightning' 
      }); 
     }); 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

Ниже полный HTML страницы для вы можете скопировать его сразу и протестировать его.

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Lightnings</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

     <style> 
      #map-canvas { 
       height: 400px; 
      } 
     </style> 
    </head> 
    <body> 

     <div id="map-canvas"></div> 

     <script src="http://code.jquery.com/jquery-latest.js"></script> 
     <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript"> 

      function initialize() { 

       var mapOptions = { 
        zoom: 2, 
        center: new google.maps.LatLng(0, 0), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 

       var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 

       // Query and plot the data once the map is ready 
       google.maps.event.addListenerOnce(map, 'idle', function() { 

        $.ajax({ 
         dataType: "json", 
         url: "get_lightnings.php" 
        }).done(function(data) { 

         data.d.forEach(function(lightning) { 

          new google.maps.Marker({ 
           position: new google.maps.LatLng(lightning.lat, lightning.lon), 
           map: map 
          }); 
         }); 
        }); 
       }); 
      } 

      google.maps.event.addDomListener(window, 'load', initialize); 

     </script> 
    </body> 
</html> 

Это было протестировано и работает нормально.

+0

Вау, спасибо. я проверю его сразу, и я дам вам кредит в кодах! –

+0

У меня есть карта, но нет молнии. http://84.24.134.81/test/radar.html http://84.24.134.81/test/get_lightnings.php –

+0

Не обращайте на это внимания, он работает. Thnx –

Смежные вопросы