Карты Google с наложением графств?

Question

У меня нет опыта работы с Картами Google, но я бы хотел добавить карту "Выберите свою страну" в свое веб-приложение. Мое приложение предназначено только для Калифорнии, поэтому оно должно поддерживать только один штат, но я не могу найти простой способ сделать это (без рисования наложенных полигонов для всех линий округа).

Я предполагал, что я легко смогу найти примеры интерфейсов в стиле "Выберите свой округ" в Google, но единственное, что я нашел, было это - http://maps.huge.info/county.htm - и я склоняюсь к удару их API, чтобы вытянуть геометрию для всего состояния, если я не могу найти лучший вариант.

У кого-нибудь есть опыт или понимание, чтобы помочь сделать это немного легче?

Answer 1

API Карт Google не предоставляет полигонов округов или любых других предопределенных границ штатов или стран. Поэтому основной проблемой здесь является получение данных многоугольника.

Полигон в API Карт Google определяется путем создания массива LatLng объектов (при условии, что вы используете API v3):

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 будет нашим хранилищем данных. Когда пользователь ищет «Эльдорадо», вы можете просто показать многоугольник следующим образом:

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

Надеюсь, это приведет вас в правильном направлении.

Answer 2

Google Fusion Tables теперь ссылается на Данные штатов, округов и округов Конгресса по всем США.

Поле геометрии таблицы слияния содержит элемент Polygon для данного объекта. Их полигоны государственных границ (и в меньшей степени округа) в некоторых местах выглядят немного низко, но они могут быть достаточно хорошими для вас, и их будет относительно легко захватить.