Javascript 带有县覆盖的谷歌地图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3544041/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps with counties overlay?
提问by linked
I have no experience working with Google Maps, but I'd like to embed a "Choose your county" map in my webapp. My app only targets California, so it only needs to support one state, but I can't find any easy way to do this (without manually drawing overlay polygons for all the county lines).
我没有使用 Google 地图的经验，但我想在我的 web 应用程序中嵌入“选择您的县”地图。我的应用程序只针对加利福尼亚，所以它只需要支持一个州，但我找不到任何简单的方法来做到这一点（无需为所有县线手动绘制叠加多边形）。
I assumed I'd easily be able to find examples of "Choose your county"-style interfaces on Google somehow, but the only thing I found was this -- http://maps.huge.info/county.htm-- and I'm leaning towards hitting their API to pull the geometry for the whole state if I can't find a better option.
我以为我可以很容易地在谷歌上找到“选择你的县”式界面的例子，但我发现的唯一一件事就是——http://maps.huge.info/county.htm——和如果我找不到更好的选择，我倾向于使用他们的 API 来拉取整个状态的几何图形。
Does anyone have any experience or insight to help make this a little easier?
有没有人有任何经验或见解来帮助使这更容易一些？
采纳答案by RedPeasant
Google Fusion Tables now links to State, County, and Congressional District datafor all of the US.
Google Fusion Tables 现在链接到全美国的州、县和国会选区数据。
The geometry field of the fusion table contains a Polygon element for the given object. Their state boundaries polygons (and to a lesser extent the counties) look a little low resolution in a few places, but it may be good enough for you and should be relatively easy to grab.
融合表的几何字段包含给定对象的 Polygon 元素。他们的州边界多边形（以及较小程度上的县）在一些地方看起来分辨率有点低，但对您来说可能已经足够了，并且应该相对容易获取。
回答by Daniel Vassallo
The Google Maps API does not provide county polygons, or any other predefined borders of states or countries. Therefore the main issue here is obtaining the polygon data.
Google Maps API 不提供县多边形或任何其他预定义的州或国家/地区边界。因此这里的主要问题是获取多边形数据。
A polygon on the Google Maps API is defined by constructing an array of LatLngobjects (assuming you're using the v3 API):
Google Maps API 上的多边形是通过构造一个LatLng对象数组来定义的（假设您使用的是 v3 API）：
var bermudaTriangleCoords = [
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)
];
Then you would use this array to construct a Polygonobject:
然后你会使用这个数组来构造一个Polygon对象：
var bermudaTriangle = new google.maps.Polygon({
paths: bermudaTriangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
And finally show it on the map by calling the setMap()method:
最后通过调用setMap()方法将其显示在地图上：
bermudaTriangle.setMap(map); // Assuming map is your google.maps.Map object
If you keep a reference to your Polygonobject, you can also hide it by passing nullto the setMap()method:
如果您保留对Polygon对象的引用，您还可以通过传递null给setMap()方法来隐藏它：
bermudaTriangle.setMap(null);
Therefore you could consider building a JavaScript object with a property name for each county. This will allow you to fetch the polygon objects from the name of the counties in O(1)(constant time), without having to iterate through all the collection. Consider the following example:
因此，您可以考虑使用每个县的属性名称构建一个 JavaScript 对象。这将允许您从O(1)（恒定时间）中的县名称中获取多边形对象，而无需遍历所有集合。考虑以下示例：
// 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...
The countiesobject will be our data store. When a user searches for "El Dorado" you can simply show the polygon as follows:
该counties对象将是我们的数据存储。当用户搜索“El Dorado”时，您可以简单地显示多边形，如下所示：
counties['El Dorado'].setMap(map);
If you keep a reference to the previously searched county, you can also call setMap(null)to hide the previous polygon:
如果保留对之前搜索过的县的引用，还可以调用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');
}
I hope this gets you going in the right direction.
我希望这能让你朝着正确的方向前进。
