Статьи

Создание анимированных маркеров карты Google с помощью CSS и JavaScript

Ноябрь 17, 2018
Анимированные маркеры Google Maps

Исходное изображение: DeviantArt

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

Однако есть одно явное исключение: гибкость и креативность с помощью маркеров на карте .

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

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

Если пользователь наводит указатель мыши на маркер, нажимает на него или использует переключатель за пределами карты, вы сможете использовать любую анимацию CSS, чтобы оживить его. Это руководство будет сосредоточено на простой стратегии, которую вы можете использовать для включения анимированных маркеров в любой из ваших проектов. (Для сравнения, два других примера — Райан Коннолли и Фелипе Фигероа — используют аналогичный метод.)

Вот основной пример анимированных маркеров на работе. Знаменитый Чеширский Кот действует как маркер для трех отдельных точек в штате Массачусетс, и вы можете использовать переключатель в правом верхнем углу, чтобы изменить его анимацию:

Основы

Есть несколько шагов, которые вам нужно сделать, чтобы добавить возможности CSS-анимации к вашим маркерам.

Шаг 1

Добавьте изображение к вашим маркерам. Вот как вы указываете свое изображение : 

var catIcon = {
    url: myImageURLhere,
    //state your size parameters in terms of pixels
    size: new google.maps.Size(70, 60),
    scaledSize: new google.maps.Size(70, 60),
    origin: new google.maps.Point(0,0)
}

Шаг 2

Добавить optimized:false Это позволяет вам визуализировать каждый маркер как отдельный элемент DOM : 

 var marker = new google.maps.Marker({
    position:latLng,
    map: map,
    // set the icon as catIcon declared above
    icon: catIcon,
    // must use optimized false for CSS
    optimized: false
});

Шаг 3

Создайте overlayViewорганизует все ваши маркеры на одной панели , к которой вы можете получить доступ из DOM: 

 var myoverlay = new google.maps.OverlayView();
    myoverlay.draw = function () {
        this.getPanes().markerLayer.id='markerLayer';
    };
myoverlay.setMap(map);

Вы можете присвоить своему маркерному слою idgetPanes() Это представление наложения автоматически собирает все маркеры, которых еще нет в другом слое . В этом случае других слоев нет, поэтому он собирает все маркеры.

Шаг 4

Используйте CSS для анимации всех маркеров в вашем слое. Это может быть анимация, которая происходит один раз или происходит непрерывно: 

 #markerLayer img {
  animation: pulse .5s infinite alternate;
  -webkit-animation: pulse .5s infinite alternate;
  transform-origin: center;
  -webkit-transform-origin: center;
}

Варианты гибкости

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

Внешний переключатель

Допустим, вы хотите включить легенду или некоторые переключаемые кнопки, чтобы пользователи могли отображать и скрывать различные слои или иметь маркеры с определенными функциями, чтобы изменить свою анимацию CSS. Это легко! Просто используйте обработчик jQuery .click() 

 $('.btn').click(function(){
   $('#markerLayer img').css('animation', 'myAnimationOptionsHere');
   $('#markerLayer img').css('-webkit-animation', 'myAnimationOptionsHere')
})

При нажатии / наведении

Хотите добавить краткую анимацию, когда пользователи наводят курсор на один маркер, или нажимаете на него? Пусть начнется хакерство! Сначала создайте глобальный массив для хранения всех ваших маркеров: 

 var allMarkers=[];

Затем, когда вы объявляете каждый маркер, добавьте атрибут title и зафиксируйте его: 

 var marker = new google.maps.Marker({
    position:latLng,
    map: map,
    icon: catIcon,
    optimized: false,
    title: allMarkers.length.toString()
});

Добавление атрибута title, который зависит от длины массива, создаст уникальные id Затем добавьте маркер в массив: 

 allMarkers.push(marker);

Наконец, вот ваши события нажатия и наведения мыши. Вы определяете каждый отдельный маркер, используя этот индивидуальный идентификатор заголовка: 

 google.maps.event.addListener(marker, 'click', function() {
  var thisTitle= Number(this.title);
  $('#markerLayer img').eq(thisTitle).css()...
})

google.maps.event.addListener(marker, 'mouseover/mouseout', function() {
  var thisTitle= Number(this.title);
  $('#markerLayer img').eq(thisTitle).css()...
})

Разные анимации для разных типов маркеров

Допустим, вы добавили на карту два отдельных типа маркеров: бейсбольные поля и футбольные поля. Поскольку оба они автоматически включаются в слой оверлея, вам нужен способ применять отдельные анимации к каждому из них. Это легко! Просто используйте атрибут src 

 #markerLayer img[src='/img/myURLpath'] {
    animation: pulse .5s infinite alternate;
    -webkit-animation: pulse .5s infinite alternate;
    transform-origin: center;
    -webkit-transform-origin: center;
}

Последние мысли

Ваша основная работа как разработчика или дизайнера — создавать продукт, который нравится вашим пользователям. Они видели много Google Maps в продуктах, которые они уже используют. Это ваша возможность сбить их ожидания!

Вот несколько способов, которыми анимация маркеров карты может создать восхищение для ваших пользователей:

  • Если у вас есть маркерные изображения, которые напоминают движущиеся объекты (например, кошки!), Дайте им CSS-анимацию, которая соответствует естественному движению.
  • Если у вас есть изображения маркеров карты, которые обычно не перемещаются (например, в магазине), примените анимацию, которая создает впечатление, что изображения счастливы, когда вы нажали на них, например, прыжок или дрожь.
  • Если у вас есть данные, соответствующие каждому маркеру, заставьте маркер реагировать на основании данных. Допустим, вы помечаете перекрестки с интенсивным движением: вы можете поместить мигающий восклицательный знак над этими областями.

Попробуйте, и ждите, когда пользовательские комплименты появятся!

Помогло ли вам это руководство? Дай мне знать в комментариях!

51
Share: