Выделение штатов США, получение назначенной классификации и выбор связанных штатов

Question

Я не уверен на 100%, с чего начать.

Я подозреваю, что мог бы использовать Google GeoMaps и getSelection(), но после нескольких испытаний Google Code Playground я так и не получил ничего.

Моя цель
Я создаю страницу поддержки для клиентов, и они хотели бы, чтобы на странице была карта, чтобы при наведении указателя мыши на определенные состояния во всплывающей подсказке отображался главный офис региона. Штаб-квартира предназначена только для регионов, но не для каждого штата, поэтому, когда они находятся над Мичиганом, они хотели бы, чтобы Огайо и Индиана также выдвинули на первый план.

Может кто-то указать мне верное направление? Я открыт для любого подхода, который я только начал с GeoMaps.

Answer 1

Я уверен, что это можно сделать в нескольких средах, но одним из вариантов будет maphilight на основе jQuery Дэвида Линча: http://davidlynch.org/projects/maphilight/docs/.

Это создает поведение подсветки карты поверх существующих карт изображений HTML. У него есть пример, который использует карту США здесь: http://davidlynch.org/projects/maphilight/docs/demo_usa.html

Допустим, у вас есть несколько областей, которые вы хотите выделить вместе (это всего лишь пример, поэтому я упростил координаты):

<area href="#" title="MI" class="hq4" shape="poly" coords="562,99, 564,97, 566,96, 571,92, 573,91, 574,92, 569,97, 565,99, 563,100, 562,99">
<area href="#" title="OH" class="hq4" shape="poly" coords="708,208, 701,212, 697,214, 694,217, 690,221, 687,222, 684,222, 710,226, 708,208">
<area href="#" title="IN" class="hq4" shape="poly" coords="598,311, 597,307, 598,303, 600,300, 602,296, 604,292, 604,287, 602,284, 598,311">

Обратите внимание, что после title атрибут, который определяет аббревиатуру состояния, я поместил class, у мафилита есть опция под названием groupBy который делает именно то, что вам нужно - он группирует несколько областей, так что если вы наводите курсор на одну из них, они все будут выделены. Когда вы инициализируете maphilight, просто установите groupBy соответственно и все государства с общим классом будут выделены вместе:

$('.map').maphilight({groupBy:"class"});

Обратите внимание, что вам не нужно использовать карту США, которую он предоставляет - вы можете сделать это с любой картой изображений, и если у вас есть определенный набор координат штата, который вы хотите использовать, вы можете просто сделать карту изображения из из них - просто не забудьте добавить тот же класс в те государства с общим штаб-квартирой.