如何在Google地图的彩色多边形上显示街道号码?

问题描述 投票:3回答:1

在我的Web应用程序中,我们需要在Google地图图块上显示彩色的多边形。我正在将数据作为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 }); });

我的问题是,

这里的彩色瓷砖编号由于颜色而不清楚。可以如下图所示。

使用this fiddle给我解决方案。

需要平铺外观如下。

enter image description here

非常感谢您提供帮助或提示,请继续进行。

javascript reactjs google-maps google-maps-api-3 maps
1个回答
2
投票
经过几天的努力,我找到了解决方案。

我正在发布,因为这将对在此方面苦苦挣扎的人有所帮助。

我的方法,

    在地图上创建新的
  • 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.

希望这会帮助某人。

© www.soinside.com 2019 - 2024. All rights reserved.