如何在 google 地图中的彩色多边形上显示街道号码？

Question

在我的网络应用程序中，我们需要在 google 地图图块上显示彩色多边形。我将数据添加为 geoJson 到 Google 地图。示例 geoJson 如下所示。

  var geoJson = {
  "type": "FeatureCollection",
  "count": 1,
  "features": [
    {
      "id": 4813444,
      "type": "Feature",
      "geometry": {
        "type": "MultiPolygon",
        "coordinates": [
          [
            [
              [
                174.7195396833,
                -36.8564663333
              ],
              [
                174.7196494333,
                -36.8563847667
              ],
              [
                174.7196634333,
                -36.85637435
              ],
              [
                174.7196478167,
                -36.8563614167
              ],
              [
                174.7193567667,
                -36.8561201667
              ],
              [
                174.7192242167,
                -36.8562234167
              ],
              [
                174.7195123,
                -36.8564622333
              ],
              [
                174.7195278333,
                -36.8564751167
              ],
              [
                174.7195396833,
                -36.8564663333
              ]
            ]
          ]
        ]
      },
      "properties": {
        "color": "#232121"
      }
    }
  ]
}

添加 Json 到 Google 地图如下。

map.data.addGeoJson(geoJson);

使用下面的代码设置彩色多边形的样式。

  map.data.setStyle(function(feature) {
    var color = feature.getProperty('color');
    return({
      fillColor: color,
      strokeWeight: 0
    });
  });

我的问题是，

此处彩砖编号因颜色原因看不清楚。可以像下图那样显示。

使用this fiddle给我一个解决方案

需要平铺如下所示。

非常感谢您提供的任何帮助或提示。

Answer 1

经过几天的努力，我找到了解决办法。

我发帖是因为这对为此苦苦挣扎的人有帮助。

我的做法，

在地图上新建 OverlayView。
为标签创建StyledMapType。
将 OverlayView 设置为现有地图。
设置zIndex第五个样式firstChild.

下面是工作代码。

  var overlay = new google.maps.OverlayView();
  var labelsMapType = new google.maps.StyledMapType([
    {elementType: 'labels.text.fill', stylers: [{color: '#777777'}]},
    {elementType: 'labels.text.stroke', stylers: [{color: '#f5f1e6'}]},
    {
      stylers: [{
        visibility: 'off',
        color: '#17263c',
        strokeWeight: 2
      }]
    },

    {
      elementType: 'labels',
      stylers: [{
        visibility: 'on',
        color: '#17263c',
        strokeWeight: 2
      }]
    }
  ], {
    name: 'Labels'
  });    
  map.overlayMapTypes.push(labelsMapType);  
  overlay.setMap(map)
  setTimeout(function(){
   document.getElementById('map_canvas').firstChild.firstChild.firstChild.firstChild.firstChild.style.zIndex = 102;
}, 2000);

Working Fiddle.

希望这对某人有所帮助。

如何在 google 地图中的彩色多边形上显示街道号码？

How to show street numbers over the colored polygon in google maps?

javascript

maps

google-maps

google-maps-api-3

reactjs