时间戳

首页 > 解决方案 > 如何在谷歌地图的彩色多边形上显示街道编号？

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

问题描述

在我的网络应用程序中，我们需要在谷歌地图图块上显示彩色多边形。我正在向geoJson谷歌地图添加数据。示例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
    });
  });

我的问题是，

由于颜色的原因，这里的彩色瓷砖编号不清楚。可以显示如下图。

用这个小提琴给我一个解决方案。

需要平铺如下所示。

在此处输入图像描述

任何帮助或提示进行高度赞赏。

标签： javascriptreactjsgoogle-mapsgoogle-maps-api-3maps

解决方案

经过几天的努力，我找到了解决方案。

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

我的做法，

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

工作小提琴。

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

推荐阅读