javascript - Google Maps API v3 在不使用多边形的情况下突出显示国家/地区边界

Question

我需要突出显示一个国家/地区的边界 - 比方说瑞士。我已经通过 FusionTablesLayer 实现了它，例如:

        var layer = new google.maps.FusionTablesLayer({
                    query: {
                        select: 'geometry',
                        from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk',
                        where: "ISO_2DIGIT IN ('CH')"
                    },
                    styles: [
                        {
                            polygonOptions: {
                                strokeColor: "#FF0000",
                                fillOpacity: "0"
                            }
                        }
                    ]
                });

                layer.setMap(map);

这里的问题是，绘制的边框太直了

是否有可能使用某种搜索请求，因为如果我转到 Google map 并搜索瑞士，国家边界会以浅粉色突出显示。这已经满足了我的要求。参见 Maps

提前致谢

Answer 1

正如我在评论中所说，这无法通过 API 获得(至少在我们发言时是这样)。

不过你可以做两件事:

1. 查看 this answer我在这里给出了一个完整的解决方案，说明如何将多边形叠加为国家边界，并提供完整的世界数据集。

2. 订阅this feature request这正是您要寻找的。

希望这对您有所帮助!

注意:此答案在 2022 年 5 月仍然有效

编辑

_{2022 年 6 月 24 日}

14 年 (!) original feature request 之后, Google 启用了 Data-driven styling .

One of the most commonly requested features you have asked for is access to the same boundaries and polygons used in Google Maps to build informative and engaging maps for your customers. Today, we are excited to announce the preview release of Data-driven styling for the Maps JavaScript API, which enables you to display and style Google boundaries.

这是一个demo和官方documentation .

这是一个完整的例子。要重现，您需要在 Google Maps Platform 控制台中创建新的 map ID 和 map 样式，并选择适当的要素图层。所有信息都是here .

let map;
let featureLayer;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 46.80, lng: 8.33 },
    zoom: 6,
    mapId: "2bda068b3c8ec0f0", // You need to create your own map ID
  });

  featureLayer = map.getFeatureLayer("COUNTRY");

  // Define the styling options
  const featureStyleOptions = {
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 1.0,
    fillOpacity: 0,
  };

  // Apply the style to a single boundary.
  featureLayer.style = (options) => {
    if (options.feature.placeId == "ChIJYW1Zb-9kjEcRFXvLDxG1Vlw") {
      // Above Place ID is Switzerland
      return featureStyleOptions;
    }
  };
}

#map {
  height: 180px;
}

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=beta" defer></script>