gpt4 book ai didi

javascript - 带有县覆盖的谷歌地图?

转载 作者:行者123 更新时间:2023-12-03 13:12:31 24 4
gpt4 key购买 nike

我没有使用谷歌地图的经验,但我想在我的网络应用程序中嵌入“选择你的县” map 。我的应用程序仅针对加利福尼亚州,因此它只需要支持一个州,但我找不到任何简单的方法来做到这一点(无需手动为所有县线绘制叠加多边形)。

我以为我可以很容易地在 Google 上找到“选择你的县”式界面的示例,但我发现的唯一东西是——http://maps.huge.info/county.htm - 如果我找不到更好的选择,我倾向于使用他们的 API 来提取整个状态的几何图形。

有没有人有任何经验或见解可以帮助使这更容易一些?

最佳答案

Google Maps 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)
];

然后你会使用这个数组来构造一个 Polygon目的:
var bermudaTriangle = new google.maps.Polygon({
paths: bermudaTriangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});

最后通过调用 setMap() 在 map 上显示它方法:
bermudaTriangle.setMap(map);    // Assuming map is your google.maps.Map object

如果您保留对 Polygon 的引用对象,你也可以通过 null 隐藏它到 setMap()方法:
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...
counties对象将是我们的数据存储。当用户搜索“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');
}

我希望这能让你朝着正确的方向前进。

关于javascript - 带有县覆盖的谷歌地图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3544041/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com