Javascript 谷歌地图与县覆盖？

我没有使用谷歌地图的经验，但我想在我的webapp中嵌入一个“选择你的县”地图。我的应用程序只针对加利福尼亚州，所以它只需要支持一个州，但我找不到任何简单的方法来做到这一点（不手动绘制所有县线的覆盖多边形）

我想我可以很容易地在谷歌上找到“选择你的国家”风格的界面，但我发现的唯一一件事是-，如果我找不到更好的选择，我倾向于点击他们的API来绘制整个州的几何图形

---

有没有人有任何经验或见解来帮助简化此过程？

谷歌地图API不提供县多边形或任何其他预定义的州或国家边界。因此，这里的主要问题是获取多边形数据

Google Maps API上的多边形是通过构造

LatLng

对象数组来定义的（假设您使用的是v3 API）：

然后，您将使用此数组构造一个

多边形

对象：

var bermudaTriangle = new google.maps.Polygon({
  paths: bermudaTriangleCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35
});

最后通过调用

setMap（）

方法将其显示在地图上：

bermudaTriangle.setMap(map);    // Assuming map is your google.maps.Map object

bermudaTriangle.setMap(null); 

如果保留对

多边形的引用

对象，也可以通过将

null

传递给

setMap（）

方法来隐藏该对象：

bermudaTriangle.setMap(map);    // Assuming map is your google.maps.Map object

bermudaTriangle.setMap(null); 

因此，您可以考虑为每个县构建具有属性名称的JavaScript对象。这将允许您在（恒定时间）内从县的名称中获取多边形对象，而无需遍历所有集合。考虑下面的例子：

// Let's start with an empty object:
var counties = {    
};

// Now let's add a county polygon:
counties['Alameda'] = new google.maps.Polygon({
  paths: [
    // This is not real data:
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.757370),
    new google.maps.LatLng(25.774252, -80.190262)
    // ...
  ],
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.3
});

// Next county:
counties['Alpine'] = new google.maps.Polygon({
  // Same stuff
});

// And so on...

countries

对象将是我们的数据存储。当用户搜索“El Dorado”时，您可以简单地显示多边形，如下所示：

counties['El Dorado'].setMap(map);

如果保留对以前搜索的县的引用，还可以调用

setMap（null）

隐藏以前的多边形：

var userInput = 'El Dorado';
var latestSearch = null;

// Check if the county exists in our data store:
if (counties.hasOwnProperty(userInput)) {
  // It does - So hide the previous polygon if there was one:
  if (latestSearch) {
    latestSearch.setMap(null);
  }
  // Show the polygon for the searched county:
  latestSearch = counties[userInput].setMap(map);
}
else {
  alert('Error: The ' + userInput + ' county was not found');
}

---

我希望这能让你走上正确的方向。

谷歌融合表现在为我们所有人提供了链接

---

融合表的几何体字段包含给定对象的多边形元素。他们的州边界多边形（以及在较小程度上的县）在一些地方看起来分辨率有点低，但对你来说可能已经足够好了，应该相对容易获取。

谷歌融合表将在2019年12月3日之后不再可用，这很不幸。通过查看他们当前的地图产品（自从我6年前写下这个答案以来，这些产品已经发生了很大的变化），我找不到任何可以替代它的产品。底部的“即将到来”可能暗示他们可能会为这些数据提供另一个来源，但不是马上，任何使用这个答案的东西都会被破坏@一旦easy Fusion Tables数据源消失，Daniel Vassallo的答案肯定会成为更好的答案，因为他提供了关于如何实际实现的更多信息，而我只是对有用的数据源进行了评论。