2015-04-23 4 views
0

Нужно указать пример того, как показывать теги и области местоположения CAP (Common Alerting Protocol) из каналов (или файлов) на Картах Google. В настоящее время я могу показать GeoRSS тегов на Google Maps с этим яваскриптом кода:Предупреждения CAP на Картах Google

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script src="./jquery/jquery.zrssfeed.min.js" type="text/javascript"></script> 
<script src="./jquery/jquery.vticker.js" type="text/javascript"></script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> 
function initialize() { 
      var myLatlng = new google.maps.LatLng(49.496675, -102.65625); 
      var mapOptions = { 
       zoom: 4, 
       center: myLatlng 
      }; 
      var map = new google.maps.Map(document.getElementById('publicgeorss'), mapOptions); 
      var georssLayer = new google.maps.KmlLayer({ 
       url: 'http://api.flickr.com/services/feeds/geo/[email protected]&lang=en-us&format=feed-georss' 
      }); 
      georssLayer.setMap(map); 
} 
google.maps.event.addDomListener(window, 'load', initialize1); 

И где-то в теле:

<div id="publicgeorss" style="height:410px; width:400px"></div> 

Спасибо заранее.

+0

@The человек, который отмечен меня без комментария: Я не знаю, что ваш проблема - чувак. Может быть, вы можете объяснить. – Yster

+0

Ну, не могу сказать наверняка, почему другие люди являются downvoting - но, возможно, они были занижены, потому что сам вопрос не очень описательный? В основном это только добавление к тексту щедрости выше, что делает «смысл», чтобы показать «Common Alerting Protocol». – davidkonrad

ответ

1

Это прямолинейно. Я не знаю, как вы получаете эти CAP, но если формат всегда является описанием выше, вы можете использовать следующий код:

(Поместив CAP в строковую переменную, это будет то же самое из фида, ajax или файл)

document.getElementById('show-cap').onclick = function() { 
    //parse CAP 
    var parser = new DOMParser(), 
     dom = parser.parseFromString(CAP, "text/xml"), 
     alert = dom.querySelector('alert'); 

    //extract some data  
    var info = alert.querySelector('info'), 
     event = info.querySelector('event').textContent, 
     headline = info.querySelector('headline').textContent, 
     instruction = alert.querySelector('instruction').textContent, 
     latLngs = alert.querySelector('area').querySelector('polygon').textContent.split(','); 

    //create polygon 
    //CAP seems to have the polygon [1..length-1] and startpoint at [0,length] 
    var i, latLng, 
     start = new google.maps.LatLng(parseFloat(latLngs[0]), parseFloat(latLngs[latLngs.length-1])), 
     path = [start]; 

    for (i=1;i<latLngs.length-1;i++) { 
     latLng = latLngs[i].split(' '); 
     path.push(new google.maps.LatLng(parseFloat(latLng[1]), parseFloat(latLng[0]))); 
    } 
    new google.maps.Polygon({ 
     paths: path, 
     fillColor: '#FF0000', 
     fillOpacity: 0.35,   
     strokeWeight: 0,  
     map: map 
    }); 

    //find and set map center 
    var bounds = new google.maps.LatLngBounds(); 
    for (i=0;i<path.length;i++) { 
     bounds.extend(path[i]); 
    } 
    map.setCenter(bounds.getCenter());  

    //create a marker 
    var marker = new google.maps.Marker({ 
     position: bounds.getCenter(), 
     map: map 
    }); 

    //create an infowindow with the headline and instructions 
    var info = new google.maps.InfoWindow({ 
     content: '<h3>'+headline+'</h3>'+'<p>'+instruction+'</p>', 
    }); 
    info.open(map, marker); 
};  

результат: enter image description here

демо ->http://jsfiddle.net/wm5fsgas/

+0

Спасибо, Дэвид. Это кажется совершенным. Приятно вести с тобой дело! – Yster

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