0

Google マップのフィード (またはファイル) から CAP (Common Alerting Protocol) ロケーション タグとエリアを表示する方法の例が必要です。現在、次の JavaScript コードを使用して、Google マップに GeoRSS タグを表示できます。

<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/?g=322338@N20&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>

前もって感謝します。

4

1 に答える 1

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);
};

結果 ： ここに画像の説明を入力

デモ -> http://jsfiddle.net/wm5fsgas/

于 2015-04-28T15:48:32.353 に答える