Question

我想在2个单独的图层上显示折线。我找不到创建自定义窗格的方法。

理想情况下，我希望创建2个自定义窗格。将我的折线放在其中一个折线上，然后将其他折线放在第二个窗格上。之后，我需要切换第二个窗格以使其可见/不可见。我现在可以放置折线的唯一方法是：

var polyline = new google.maps.Polyline({
    path: line_points,
    strokeColor: '#cdcdc4',
    strokeOpacity: 1.0,
    strokeWeight: 2.0,
});
polyline.setMap(map);

这样，我的折线就放置在默认窗格中：overlayLayer。我可以显示/隐藏这一层，但我需要另外一层。将来甚至可能再增加3-4层。

是否有一些变通方法来创建自己的自定义窗格？谢谢。

Answer 1

您可以使用数据层并分别切换要素的可见性。下面是一个简单的示例，其中我向ID为/c/Python37-32的多边形和my_points为面的多边形中添加了一些点。然后，您可以使用my_polygon注册事件监听器，等等。

getFeatureById

function initMap() {

  var myLatLng = new google.maps.LatLng(-24, 123);
  var mapOptions = {
    zoom: 3,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  var fc = {
    "type": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "id": "my_points",
      "geometry": {
        "type": "MultiPoint",
        "coordinates": [
          [129.0, -22.0],
          [131.0, -22.0],
          [133.0, -22.0],
          [135.0, -22.0],
          [137.0, -22.0]
        ]
      }
    }, {
      "type": "Feature",
      "id": "my_polygon",
      "properties": {
        "letter": "G",
        "polygon-bg-color": "blue",
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [123.61, -22.14],
            [122.38, -21.73],
            [121.06, -21.69],
            [119.66, -22.22],
            [119.00, -23.40],
            [118.65, -24.76],
            [118.43, -26.07],
            [118.78, -27.56],
            [119.22, -28.57],
            [120.23, -29.49],
            [121.77, -29.87],
            [123.57, -29.64],
            [124.45, -29.03],
            [124.71, -27.95],
            [124.80, -26.70],
            [124.80, -25.60],
            [123.61, -25.64],
            [122.56, -25.64],
            [121.72, -25.72],
            [121.81, -26.62],
            [121.86, -26.98],
            [122.60, -26.90],
            [123.57, -27.05],
            [123.57, -27.68],
            [123.35, -28.18],
            [122.51, -28.38],
            [121.77, -28.26],
            [121.02, -27.91],
            [120.49, -27.21],
            [120.14, -26.50],
            [120.10, -25.64],
            [120.27, -24.52],
            [120.67, -23.68],
            [121.72, -23.32],
            [122.43, -23.48],
            [123.04, -24.04],
            [124.54, -24.28],
            [124.58, -23.20],
            [123.61, -22.14]
          ]
        ]
      }
    }, {
      "type": "Feature",
      "id": "my_other_polygon",
      "properties": {
        "polygon-bg-color": "yellow",
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [115.61, -22.14],
            [114.38, -21.73],
            [113.06, -21.69],
            [111.66, -22.22],
            [111.00, -23.40],
            [110.65, -24.76],
            [110.43, -26.07],
            [110.78, -27.56],
            [111.22, -28.57],
            [112.23, -29.49],
            [113.77, -29.87],
            [115.57, -29.64],
            [116.45, -29.03],
            [116.71, -27.95],
            [116.80, -26.70],
            [116.80, -25.60],
            [115.61, -25.64],
            [114.56, -25.64],
            [113.72, -25.72],
            [113.81, -26.62],
            [113.86, -26.98],
            [114.60, -26.90],
            [115.57, -27.05],
            [115.57, -27.68],
            [115.35, -28.18],
            [114.51, -28.38],
            [113.77, -28.26],
            [113.02, -27.91],
            [112.49, -27.21],
            [112.14, -26.50],
            [112.10, -25.64],
            [112.27, -24.52],
            [112.67, -23.68],
            [113.72, -23.32],
            [114.43, -23.48],
            [115.04, -24.04],
            [116.54, -24.28],
            [116.58, -23.20],
            [115.61, -22.14]
          ]
        ]
      }
    }]
  };

  map.data.addGeoJson(fc);

  var my_points = map.data.getFeatureById('my_points');
  var my_polygon = map.data.getFeatureById('my_polygon');

  // Updated to show setStyle method
  map.data.setStyle(function(feature) {
    var color;
    if (feature.getProperty('polygon-bg-color')) {
      color = feature.getProperty('polygon-bg-color');
    }
    return /** @type {!google.maps.Data.StyleOptions} */ ({
      fillColor: color,
    });
  });

  google.maps.event.addDomListener(document.getElementById('button1'), 'click', function() {

    map.data.overrideStyle(my_points, {
      visible: false
    });
  });

  google.maps.event.addDomListener(document.getElementById('button2'), 'click', function() {

    map.data.overrideStyle(my_points, {
      visible: true
    });
  });

  google.maps.event.addDomListener(document.getElementById('button3'), 'click', function() {

    map.data.overrideStyle(my_polygon, {
      visible: false
    });
  });

  google.maps.event.addDomListener(document.getElementById('button4'), 'click', function() {

    map.data.overrideStyle(my_polygon, {
      visible: true
    });
  });
}

#map-canvas {
  height: 110px;
}

文档：https://developers.google.com/maps/documentation/javascript/reference/data

Google映射自定义窗格/图层

1 个答案: