Question

我想在Google地图中使用Google Map JS API合并以下kmz文件：http://www.cru.uea.ac.uk/cru/data/crutem/ge/CRUTEM4-2013-03_gridboxes_grey.kml由东英吉利大学气候研究部门制作。

使用Google地球查看此文件时，您会看到一个棋盘格。点击一个网格，你会得到一个信息窗口，其中包含一个链接＆＃34; station＆＃34;。如果单击指向工作站的链接（指向另一个kml文件），则会显示网格中的气象站。点击其中任何一个都可以获得年度临时变化。

我设法在地图上显示相同的叠加层，但点击链接＆＃34; station＆＃34;导致kml的文件下载，而不是在谷歌地图中显示kml的内容。

代码如下：

createCRUTEMlayer('http://www.cru.uea.ac.uk/cru/data/crutem/ge/CRUTEM4-2013-03_gridboxes_grey.kml');


function createCRUTEMlayer(myURL) {

     CRUTEMset = new google.maps.KmlLayer({
        url: myURL,
        preserveViewport: true
     });

     // the following check on status has been placed within a listener on status change as it is not available right away

     google.maps.event.addListener(CRUTEMset,'status_changed',function(){
        if (CRUTEMset.getStatus() != 'OK') {
           alert('Google Maps could not load the layer: ' + myURL + ' Status returned is: ' + CRUTEMset.getStatus());
        }
     });

     CRUTEMset.setMap(map);
}

Answer 1

我不知道如何很好地解决这个问题。但是窥视生成的HTML，可以看到＆＃34; Stations＆＃34;链接弹出窗口：

<div class="gm-style-iw" ...>
    ...
    <a href="http://www.cru.uea.ac.uk/cru/..._stations.kml" ...>Stations</a>

可以使用一些jQuery技巧在单击时从这些链接获取新URL，并使用它加载新图层：

// Handle any link that ends in .kml ourselves:
$("body").on("click", "a[href$='.kml']", function(event) {
    event.preventDefault();
    var newURL = $(this).attr("href");
    createCRUTEMlayer(newURL);
});

这会添加Station标记（及其弹出窗口），但在刷新页面之前不会删除它们。点击其他地方时，我不知道这些图层中有足够多可以删除它们，但我确定它可行。

请注意，这是一个危险的黑客，因为第三方KML文件的内容可能会发生变化。例如，如果KML中的链接不再以.kml结尾，那么jQuery选择器将无法再找到它们。此外，它还处理以.kml结尾的所有链接。可以使用on("click", ".gm-style-iw a[href$='.kml']", ...将jQuery限制在Google地图信息框中，但这会导致对Google地图HTML的依赖。

以下完整摘录。

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>KML Layers</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <!-- jQuery 1.x for support IE8 and older -->
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>

// Global, not too nice, but allowing for using the function from the question.
var map;

function createCRUTEMlayer(myURL) {

     CRUTEMset = new google.maps.KmlLayer({
        url: myURL,
        preserveViewport: true
     });

     // the following check on status has been placed within a listener on status change as it is not available right away

     google.maps.event.addListener(CRUTEMset,'status_changed',function(){
        if (CRUTEMset.getStatus() != 'OK') {
           alert('Google Maps could not load the layer: ' + myURL + ' Status returned is: ' + CRUTEMset.getStatus());
        }
     });

     CRUTEMset.setMap(map);
}

function initialize() {
    var amsterdam = new google.maps.LatLng(52.370215,4.895167);
    var mapOptions = {
        zoom: 3,
        center: amsterdam,
        preserveViewport: true
    }

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    createCRUTEMlayer('http://www.cru.uea.ac.uk/cru/data/crutem/ge/CRUTEM4-2013-03_gridboxes_grey.kml');

    // Handle any link that ends in .kml ourselves:
    $("#map-canvas").on("click", "a[href$='.kml']", function(event) {
        event.preventDefault();
        var newURL = $( this ).attr("href");
        createCRUTEMlayer(newURL);

        // Click the next div after the popup's main <div>, being the close button...
        $(this).parents(".gm-style-iw").next().click();
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

＆＃13;

嵌套的KML下载而不是显示

1 个答案: