Перетаскивание альтернативы для получения карт Google Maps на сенсорных устройствах

Question

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

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

Обратите внимание: что выбранные местоположения не будут связаны с адресами, поэтому я не могу отменить геокодирование адресов.

Любая помощь приветствуется.

tl; dr; Мне нужен удобный для пользователя способ отметить определенное местоположение на карте Google, чтобы получить его координаты.

Answer 1

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

Я нашел решение с наложением централизованного изображения без использования изображений.

HTML, моя карта выглядит следующим образом:

<div id="map"> 
    <div id="map_canvas" style="width:100%; height:400px"></div> 
    <div id="cross"></div> 
</div> 

Тогда я помещаю перекрестный DIV по карте так:

#map { 
    position: relative; 
} 

#cross { 
    z-index: 9999 !important; 
    position: absolute; 
    top: 50%; 
    width: 100px; 
    height: 100px; 
    left: 50%; 
    margin-left: -50px; 
    margin-top: -50px; 
    display: block; 
} 

Затем я создаю перекрестие с некоторыми CSS-магией:

#cross:before, #cross:after { 
    content: ""; 
    position: absolute; 
    z-index: -1; 
    background: #d00; 
    opacity: .5; 
} 

#cross:before { 
    left: 50%; 
    width: 30%; 
    margin-left: -15%; 
    height: 100%; 
    opacity: .5; 
} 

#cross:after { 
    top: 50%; 
    height: 30%; 
    margin-top: -15%; 
    width: 100%; 
    opacity: .5; 
} 

используя'pointer-события: none' в CSS, любой мыши или события прикосновения должны пройти насквозь. Однако не тестировались в старых браузерах.

#cross, #cross:before, #cross:after { 
    pointer-events: none; 
} 

Пожалуйста, найти свое полное решение здесь: http://jsfiddle.net/4vrzgrx1/2/

Моего ответа основывается на этом связанный с этим вопрос: Google Maps transparent image overlay

Надеется, что это может быть полезно для некоторых людей.