我没有使用 Google 地图的经验，但我想在我的网络应用程序中嵌入“选择您的县”地图。我的应用程序仅针对加利福尼亚州，因此它只需要支持一个州，但我找不到任何简单的方法来做到这一点（无需手动为所有县线绘制覆盖多边形）。
我以为我可以轻松地在 Google 上找到“选择你的县”风格界面的示例，但我发现的唯一的就是这个 - http://maps.huge.info/county.htm ——如果我找不到更好的选择，我倾向于使用他们的 API 来提取整个状态的几何图形。
有没有人有任何经验或见解可以帮助让这变得更容易一些？
Google 地图 API 不提供县多边形或州或国家的任何其他预定义边界。因此这里的主要问题是获取多边形数据。
Google Maps API 上的多边形是通过构造
LatLngvar 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)
];
然后你可以使用这个数组来构造一个
Polygonvar 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
如果保留对
PolygonnullsetMap()bermudaTriangle.setMap(null);
因此，您可以考虑构建一个带有每个县的属性名称的 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...
countiescounties['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');
}
我希望这能让您朝着正确的方向前进。
Google Fusion Tables 现在链接到全美国的州、县和国会区数据。
融合表的几何字段包含给定对象的多边形元素。他们的州边界多边形（以及较小程度上的县）在某些地方看起来分辨率有点低，但它可能对您来说足够好并且应该相对容易抓取。
更新：Google Maps for JavaScript API 现在可以轻松导入 geoJSON 数据，并且至少有一种在线工具可将 shapefile 转换为 geoJSON 格式。可以从许多在线来源（包括美国人口普查局）以 0.00 美元的价格获取各县的 Shapefile。
<!doctype html>
<!--
@license
Copyright 2019 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<html>
<head>
<title>Data Layer: Counties</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./gmap-counties.css" />
<script type="module" src="./gmap-counties.js"></script>
</head>
<body>
<div id="map" style="width:50%;height:50%"></div>
<!--
https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=---------&callback=initMap"
defer
></script>
</body>
</html>
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: { lat: 43.87, lng: -91.22 },
disableDefaultUI: true,
mapId:'15ee2ec694f3122c', //optional
});
// // NOTE: This uses cross-domain XHR, and may not work on older browsers.
// map.data.loadGeoJson(
// "https://storage.googleapis.com/mapsdevsite/json/google.json",
// );
// // Load GeoJSON from local file
// map.data.loadGeoJson('./data/counties.geojson');
// Load GeoJSON & apply styling
map.data.loadGeoJson('./data/counties.geojson', null, function(features) {
// Styling for the GeoJSON layer
map.data.setStyle({
fillColor: '#FED8B1',
strokeColor: 'red',
strokeWeight: 0.05
});
});
}
window.initMap = initMap;
如果您不想进行转换，请链接到 Gist 以获取县数据 ->