0

需要一个示例来说明如何在 Google 地图上显示来自提要（或文件）的 CAP（通用警报协议）位置标签和区域。目前，我可以使用以下 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 放在字符串变量中，它与 feed、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 回答