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

debugcn 发表于 Dev

苏达珊娜·达亚南达

在我的网络应用程序中，我们需要在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
    });
  });

我的问题是

由于颜色，此处的彩色图块编号不清楚。可以如下图所示。

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

需要平铺如下图。

任何帮助或提示继续前进高度赞赏。

苏达珊娜·达亚南达

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

我正在发布信息，因为这将对那些为此奋斗的人有所帮助。

我的方法

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

工作小提琴。

希望这会帮助某人。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。