谷歌地图 - 不正确的弹出信息

时间:2015-05-27 23:30:10

标签: google-maps

我使用Zonums Solutions的Shp2kml2软件将多个shapefile转换为KML。我已经制作了一张带有KML图层的地图(我已将其导入google文档以获取网址)。我的地图位于:http://userpages.flemingc.on.ca/~catam/collab2.html

我有: 6个多边形KML图层, 1点KML层, 1 Google Fusion桌点图层

但是当我尝试点击特定点时,弹出信息是多边形的信息,它与特定点位于同一个地方。

我的代码是:

    var map, layer2;
    function initialize() {
    var ontario = new google.maps.LatLng(49.2867873, -84.7493416);
    var mapOptions = {
        zoom: 5,
        center: ontario
    }

    var infoWindow = new google.maps.InfoWindow();
    var openInfoWindow = function (KMLevent) {
        infoWindow.close();
        infoWindow.setOptions(
        {
            content: KMLevent.featureData.infoWindowHtml,
            position: KMLevent.latLng,
            pixelOffset: KMLevent.pixelOffset
        });
        infoWindow.open(map);
    };

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

    var kmlOptions = {
        suppressInfoWindows: true,  // do not to display an info window when clicked
        preserveViewport: false,
        map: map
    };


    var urls = [
       'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkajc2OGZTZDZBV0k&export=download', // SCHOOLS, NDP, LIBERAL, PC1, PC2, PC3, 
       'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkQzRSdVB1TVRseU0&export=download',    'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkWFlscVM5N01lSDQ&export=download',     'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkbHNSTjhCN1dLQTg&export=download',      'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkdnRoYnN1bnpubEU&export=download',      'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkaHg1WlNKdU1VWHc&export=download'
    ];

    layer2 = new google.maps.FusionTablesLayer({
    query: {
      select: 'col9',
      from: '1FzRSqRcxY37i7VtejqONHhAB-MrzFhakYSvZaIvo'
    }
  });
  layer2.setMap(map);


    urls.forEach(function(url) {
        var layer = new google.maps.KmlLayer(url, kmlOptions);
        layer.setMap(map);
        KmlLayer.setZIndex(999);
        google.maps.event.addListener(layer, "click", openInfoWindow);

    });

}

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

1 个答案:

答案 0 :(得分:0)

看起来多边形图层正在点上绘制。因此,即使您认为单击该点,也会在多边形上生成实际的单击事件。

一种解决方案是首先绘制多边形,然后绘制点。

如果那是不可能的,那么你应该根据它是多边形还是点来设置图层的z-index。

kmlLayer.setZIndex(999);

z-index越高,层越高。我建议使用高z-index作为点,同时使用低z-index作为多边形。这应该可以解决你的问题。

第一个选项是在多边形网址后移动网址。这应该可以在不需要z-index的情况下工作,并且无需更改任何代码即可工作。

var urls = [
   'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkQzRSdVB1TVRseU0&export=download',    'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkWFlscVM5N01lSDQ&export=download',     'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkbHNSTjhCN1dLQTg&export=download',      'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkdnRoYnN1bnpubEU&export=download',      'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkaHg1WlNKdU1VWHc&export=download',
   'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkajc2OGZTZDZBV0k&export=download', // SCHOOLS, NDP, LIBERAL, PC1, PC2, PC3, 
];

第二个选项是从数组中删除点url并单独添加。首先绘制多边形,如下所示。

var urls = [
   'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkQzRSdVB1TVRseU0&export=download',    'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkWFlscVM5N01lSDQ&export=download',     'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkbHNSTjhCN1dLQTg&export=download',      'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkdnRoYnN1bnpubEU&export=download',      'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkaHg1WlNKdU1VWHc&export=download',
];

urls.forEach(function(url) {
    var layer = new google.maps.KmlLayer(url, kmlOptions);
    layer.setZIndex(10);
    layer.setMap(map);

    google.maps.event.addListener(layer, "click", openInfoWindow);
});

之后添加点图层

var pointsUrl = 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkajc2OGZTZDZBV0k&export=download'; // SCHOOLS, NDP, LIBERAL, PC1, PC2, PC3, 

var layer = new google.maps.KmlLayer(url, kmlOptions);
layer.setZIndex(10);
layer.setMap(map);

google.maps.event.addListener(layer, "click", openInfoWindow);