谷歌地图与县覆盖?

时间:2010-08-23 00:26:34

标签: javascript google-maps

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

我以为我很容易就能在某种程度上找到Google上“选择你的县”风格界面的例子,但我发现的唯一一件事就是这个 - http://maps.huge.info/county.htm - 我倾向于如果我找不到更好的选择,请点击他们的API来拉动整个状态的几何。

有没有人有任何经验或见解可以帮助我们更轻松一点?

2 个答案:

答案 0 :(得分:34)

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()方法在地图上显示它:

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

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

答案 1 :(得分:17)

Google Fusion Tables现在可以链接到所有美国的State, County, and Congressional District data

融合表的几何字段包含给定对象的Polygon元素。他们的州边界多边形(以及在较小程度上的县)在一些地方看起来有点低分辨率,但它可能对你来说足够好并且应该相对容易抓住。