如何在谷歌地图上，将街道号码显示在彩色多边形之上？

Question

在我的网络应用程序中，我们需要在谷歌地图上显示有色多边形瓦片。我将数据添加为 geoJson 到 Google Map 上。示例 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
    });
  });

我的问题是：

由于颜色原因，这里的彩色瓷砖编号不清晰。需要像下面的图片一样显示。

请使用这个JSFiddle给我提供解决方案。

需要让瓷砖看起来像下面这样。

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

- Sudarshana Dayananda

---

请说明投票关闭此问题的原因。 - Sudarshana Dayananda

你的问题太宽泛了，这就是关闭投票告诉你的。没有尝试去做。你所谓的“瓦片号码”实际上是街道号码，是图像瓦片的一部分。此外，这个问题之前已经被问过了，那里的答案仍然有效。你不能这样做。 - MrUpsidown

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);

这是可以工作的代码片段。

希望能对某些人有所帮助。

- Sudarshana Dayananda

---

由于使用了未记录的方式来实现当前产品状态下不应该实现的功能，因此一旦谷歌更改地图的HTML结构，就容易完全失败。 - MrUpsidown

@MrUpsidown 完全同意你的观点。但是使用Google地图API无法实现问题中所描述的功能。我知道这个回答可能有些愚蠢，但它确实有效，并且希望能对那些想要实现问题中所述功能的人有所帮助。 - Sudarshana Dayananda

似乎在德国无法正常工作（已在fiddle上测试）。是的，我们有门牌号码;-) - Bob S