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

问题在于，绘制的边界太直了。

是否有可能使用某种搜索请求？因为如果我去谷歌地图并搜索瑞士，国家边界会以浅粉色突出显示。这已经满足我的要求。请参见地图

提前致谢

- Baby Jesus

---

欢迎来到瑞士;-) 不幸的是，API中没有检索此选项的选项，即使在maps.google.com中可用。但您可以使用外部数据源。 - MrUpsidown

请查看我的更新答案。现在您可以使用数据驱动的样式。我已经包含了一个完整的示例和关于如何实现它的说明。 - MrUpsidown

Answer 1

正如我在评论中所说的那样，API目前不支持此功能。

但您可以尝试以下两种方法：

1. 查看this answer，其中提供了完整的解决方案，介绍了如何叠加多边形作为国家边界，并提供了完整的世界数据集。

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

希望这可以帮助您！

注意：这个答案在05.2022仍然有效。

编辑

_{2022年6月24日}

在原始功能请求提出14年后，Google终于推出了数据驱动样式。

您们最常要求的功能之一是访问与Google Maps中用于构建信息丰富、引人入胜地图的相同边界和多边形。今天，我们很高兴地宣布Maps JavaScript API的预览版本发布，使您能够显示和设置Google边界的样式。

这里有一个演示和官方的文档。

这里有一个完整的例子。为了复现该示例，您需要在Google Maps Platform控制台中创建一个新的地图ID和地图样式，并选择适当的要素层。所有信息都在这里。

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>

- MrUpsidown