2

Карта

Как реализовать данную карту, при наведении менять цвет страны а при нажатии ставить метку и естественно отдавать какой-то параметр на бекэнд, мои предположения это svg карта плюс js, но опять опыта реализации нет? Подскажите как реализовать или же если я правильно думаю то ткните на хорошую статью. Заранее спасибо!)

3

3 ответа 3

1

Можно реализовать с помощью Google Maps.

Вам нужно будет найти координаты полигонов в raw формате (если Вы желаете использовать kml формат, помните, что он умеет обрабатывать только click событие).

Далее нужно создать полигоны, как, можно найти в поиске: Google Maps Polygon Example

Объект Polygon умеет обрабатывать нужные Вам события (click, mouseover, ...), нужно только назначить Ваш обработчик, документацию можно найти в поиске: Google Maps Polygon Options

Оформление можно сделать с помощью Google Maps Wizard

P.S. Для вставки ссылок не хватает рейтинга

1

Можно использовать замечательную JS библиотеку для карт – LeafletJS. Вот и урок по созданию карты как вы хотите – называется Interactive Choropleth Map

1

Эта задача полностью решается через API Яндекс.Карт. По пунктам:

  1. Добавить страны мира на карту и раскрасить их можно через модуль Регионы. Пример в песочнице Яндекса и пример на jsfiddle, где сделана карта мира без подложки.

    ymaps.regions.load('001', {
     lang: 'ru',
     quality: 1
    }).then(function (result) {
     var regions = result.geoObjects; 
     map.geoObjects.add(regions);
    }, function () {
     alert('No response');
    });
    
  2. Обрабатывать клики по полигонам стран можно через систему событий, пример есть в этой статье документации.

  3. По клику также можно ставить метку в точку клика, вот так:

    myMap.events.add('click', function (e) {
     var coords = e.get('coords');
     myMap.geoObjects.add(new ymaps.Placemark(coords))
    });
    

Подробно решение с помощью API Яндекс.Карт рассмотрено в этом вопросе: Как сделать интерактивную карту мира без подписей / контурную карту

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.