如何在谷歌地图的彩色多边形上显示街道编号？

Question

在我的网络应用程序中，我们需要在谷歌地图图块上显示彩色多边形。我正在将数据作为 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到谷歌地图。

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上方设置为现有地图。
• 为第五个firstChild设置zIndex样式。

下面是工作代码。

  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.

希望这会对某人有所帮助。