问题：

谷歌地图Api：无法单击数据层后面的可单击多边形

王叶五

2023-03-14

您好，我正在使用谷歌地图api（JavaScript）构建一个交互式世界地图。在我遇到这个问题之前，一切都很顺利。我用多边形来显示一个国家的轮廓。单击这些多边形时，会触发显示国家信息的模式。这一直有效，直到我开始使用“数据层：地震数据”。我使用的不是地震数据，而是我所在公司的销售信息。因此，如果我们的大部分客户来自荷兰，那么分配给荷兰的数据层将非常大。问题是，由于数据层，这些国家不再可以点击。我不能点击“通过”数据层。是否有可能触发数据层后面的事件？

此代码显示数据层：

map.data.loadGeoJson('./data/test.json');

map.data.setStyle(function(feature) {
  var percentage = parseFloat(feature.getProperty('percentage'));
  return ({
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: percentage,
      fillColor: '#00ff00',
      fillOpacity: 0.35,
      strokeWeight: 0
    }
  })

});

map.data.addListener('mouseover', function(event) {
  map.data.overrideStyle(event.feature, {
    title: 'Hello, World!'
  });
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});

function eqfeed_callback(data) {
  map.data.addGeoJson(data);
}

此代码显示多边形：

function drawMap(data) {

  var rows = data['rows'];
  for (var i in rows) {
    if (rows[i][0] != 'Antarctica') {


      var newCoordinates = [];
      var geometries = rows[i][1]['geometries'];

      if (geometries) {
        for (var j in geometries) {
          newCoordinates.push(constructNewCoordinates(geometries[j]));
        }
      } else {
        newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
      }
      var country = new google.maps.Polygon({
        paths: newCoordinates,
        strokeColor: 'transparent',
        strokeOpacity: 1,
        strokeWeight: 0.3,
        fillColor: '#cd0000',
        fillOpacity: 0,
        name: rows[i][0]

      });
      google.maps.event.addListener(country, 'mouseover', function() {
        this.setOptions({
          fillOpacity: 0.3
        });
      });
      google.maps.event.addListener(country, 'mouseout', function() {
        this.setOptions({
          fillOpacity: 0
        });
      });
      google.maps.event.addListener(country, 'click', function() {
        var countryName = this.name;
        var code = convert(countryName); // Calls a function that converts the name of the country to its official ISO 3166-1 alpha-2 code.
        var modal = document.querySelector('.modal');
        var instance = M.Modal.init(modal);
        instance.open();

      });


      country.setMap(map);
    }
  }

如果在文档中阅读，更改zIndex将不起作用，因为“标记始终显示在线字符串和多边形的前面。”

有没有办法点击数据层后面的多边形？

编辑我试图给多边形一个更高的zIndex，我使数据层不可点击

map.data.loadGeoJson('./data/test.json');

map.data.setStyle(function(feature) {
  var percentage = parseFloat(feature.getProperty('percentage'));

  return ({
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: percentage,
      fillColor: '#00ff00',
      fillOpacity: 0.35,
      strokeWeight: 0,
      clickAble: false,
      zIndex: 50


    }
  })

});

function eqfeed_callback(data) {
  map.data.addGeoJson(data);
}


function drawMap(data) {

  var rows = data['rows'];
  for (var i in rows) {
    if (rows[i][0] != 'Antarctica') {


      var newCoordinates = [];
      var geometries = rows[i][1]['geometries'];

      if (geometries) {
        for (var j in geometries) {
          newCoordinates.push(constructNewCoordinates(geometries[j]));
        }
      } else {
        newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
      }
      var country = new google.maps.Polygon({
        paths: newCoordinates,
        strokeColor: 'transparent',
        strokeOpacity: 1,
        strokeWeight: 0.3,
        fillColor: '#cd0000',
        fillOpacity: 0,
        name: rows[i][0],
        zIndex: 100

      });
      google.maps.event.addListener(country, 'mouseover', function() {
        this.setOptions({
          fillOpacity: 0.3
        });
      });
      google.maps.event.addListener(country, 'mouseout', function() {
        this.setOptions({
          fillOpacity: 0
        });
      });
      google.maps.event.addListener(country, 'click', function() {
        var countryName = this.name;
        var code = convert(countryName); // Calls a function that converts the name of the country to its official ISO 3166-1 alpha-2 code.
        var modal = document.querySelector('.modal');
        var instance = M.Modal.init(modal);
        instance.open();

      });


      country.setMap(map);
    }
  }
  //console.log(map);
  //test(map)
}

显然，编辑数据层不是问题，但图标是。这就是为什么我这样做时它不起作用的原因：

     map.data.setStyle(function(feature) {
        var percentage = parseFloat(feature.getProperty('percentage'));

        return ({
            icon: {
                path: google.maps.SymbolPath.CIRCLE,
                scale: percentage,
                fillColor: '#00ff00',
                fillOpacity: 0.35,
                strokeWeight: 0,
                clickable: false
            }

        })

    });

正确的方法是：

    map.data.setStyle(function(feature) {
        var percentage = parseFloat(feature.getProperty('percentage'));

        return ({
            icon: {
                path: google.maps.SymbolPath.CIRCLE,
                scale: percentage,
                fillColor: '#00ff00',
                fillOpacity: 0.35,
                strokeWeight: 0
            },
            clickable: false
        })

    });

共有2个答案

钱俊楚

2023-03-14

我发现，在设置z顺序之后，当有许多多边形时，“地图api”无法可靠地向顶层的多边形功能发送单击。

我有一个区域的数据层，每个特征都是一个区域边界。当你点击一个功能时，它会在顶部加载另一个数据层。顶层由区域内具有较高z阶的多边形组成，代表该区域内的房屋所有权边界。

载入房屋后，单击房屋应将单击发送到房屋多边形，而不是区域。但这有时会失败——特别是如果有很多房子的话。

为了解决这个问题，在单击某个区域功能后，我将该功能设置为不可单击。然后，单击始终传播到正确的房屋特征。您仍然可以单击较低层的其他功能，但不能单击选定的功能。如果您的数据和演示遵循类似的模式，则此解决方案应该可以工作。

/* private utility is only called by this.hideOnlyMatchingFeaturesFromLayer() */
  _overrideStyleOnFeature(feature, layer, key, value,  overrideStyle, defaultStyle) {
    if (feature.getProperty(key) === value) {
      if (this.map) {
        layer.overrideStyle(feature, overrideStyle);
      }
    } else {
      if (this.map) {
        layer.overrideStyle(feature, defaultStyle);
      }
    }
  }

  /* Apply an overrideStyle style to features in a data layer that match key==value
   * All non-matching features will have the default style applied.
   * Otherwise all features except the matching feature is hidden!
   * Examples:
   *    overrideStyle = { clickable: false,strokeWeight: 3}
   *    defaultStyle = { clickable: true,strokeWeight: 1}
   */

  overrideStyleOnMatchingFeaturesInLayer(layer, key, value, overrideStyle, defaultStyle) {
    layer.forEach((feature) => {
      if (Array.isArray(feature)) {
        feature.forEach((f) => {
          _overrideStyleOnFeature(f, layer, key, value, overrideStyle, defaultStyle);
        });
      } else {
        _overrideStyleOnFeature(feature, layer, key, value, overrideStyle, defaultStyle);
      }
    });
  }

  /* example usage */
  overrideStyleOnMatchingFeaturesInLayer(
    theRegionsDataLayer,
    'PROP_NAME',
    propValue,
    { clickable: false, strokeWeight: 3},
    { clickable: true, strokeWeight: 1}
);

易京

2023-03-14

这里基本上有两个选项：

将数据层的clickable属性设置为false，以便可以单击下面的元素。如果你不需要对数据层的点击做出反应，这将起作用...

选项2示例代码：

map.data.setStyle({
    clickable: false
});

编辑：下面的完整工作示例，使用选项2。如您所见，多边形位于数据层下方，但您仍然可以单击它。

js lang-js prettyprint-override">function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: -28,
      lng: 137
    }
  });

  var polygon = new google.maps.Polygon({
    strokeOpacity: 0,
    strokeWeight: 0,
    fillColor: '#00FF00',
    fillOpacity: .6,
    paths: [
      new google.maps.LatLng(-26, 139),
      new google.maps.LatLng(-23, 130),
      new google.maps.LatLng(-35, 130),
      new google.maps.LatLng(-26, 139)
    ],
    map: map
  });

  polygon.addListener('click', function() {

    console.log('clicked on polygon');
  });

  // Load GeoJSON
  map.data.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/google.json');

	// Set style
  map.data.setStyle({
    fillColor: '#fff',
    fillOpacity: 1,
    clickable: false
  });
}

#map {
  height: 200px;
}

<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<div id="map"></div>

类似资料：

谷歌地图层点击更改样式多边形

我正在使用geojson数据处理Google地图中的图层。我现在有一个有四个不同多边形的图层，当你点击它们时，它们会从灰色变成绿色。但是当我再次点击时，它不会变回灰色，这就是点击功能的目的。在我的情况下，它适用于我的编辑器，https://embed.plnkr.co/hi4MtjO8f0PN6rCW70rE/。这是完整的代码段。我修好了！！我更改了几行的位置，并将其设置为false或tru
谷歌地图数据层，点击多边形并改变不透明度（Chrome Bug）

我有一个谷歌地图，我使用addGeoJson将几何数据*加载到数据层。在我尝试绑定多边形上的事件以更改不透明设置之前，一切都正常。 *我从OSM检索城市边界以绘制多边形，我认为我的json对象格式良好，我以谷歌为参考：https://storage.googleapis.com/mapsdevsite/json/google.json 只要我点击一个多边形（其中任何一个），它似乎会复制我周围的任何
谷歌地图API V2:如何使标记可点击？

如何使Android Google Maps API v2中的标记变得可点击，以便它们要么打开一个带有选项的菜单，要么开始一个新的活动？我相信我在我的应用程序中的标记目前在一个“newb”方法。我没有为它们分配一个名称或方法，以便能够将其与所需代码的其余部分链接在一起。如果你回答这个问题，请包括一个标记被引入一个独特的名称，然后被设置为可点击打开一个新活动的示例代码。
在谷歌地图api中加载多边形

我想实现喜欢用户可以从我们的应用程序在谷歌地图绘制一个区域。然后当他回来的时候，然后应该加载他/她以前画的数据。我用了两种方法。一是,， > 使用javascript在googlemap中绘制多边形 https://developers.google.com/maps/documentation/javascript/drawinglayer 使用谷歌地图api数据层<代码>http://jsf
OSM到谷歌地图多边形

我想用多边形类和一组lat/lng坐标在谷歌地图上画一个城区区域。 OpenStreetMap为我提供了所需的所有数据——如果我键入一些地区名称，我可以获得OSM XML格式的有用数据，例如拉脱维亚里加“Vecmilgravis”地区的OSM绘制多边形，以及OSM XML格式的数据。问题是所有这些节点都是按某种奇怪的顺序排序的，因此如果我只提取所有和对，并为Google Maps多边形类创建一个
谷歌地图标记可点击区域太大

使用google maps API，我有一个带有一些自定义图标的近距离标记的地图。每个标记是41px×50px，但每个标记的可点击区域是200px×200px。带标记的地图截图及其可点击区域有什么办法可以缩小可点击区域的大小吗？

谷歌地图Api：无法单击数据层后面的可单击多边形

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档