Вопрос по javascript, google-maps-api-3, mobile – Google Maps API v3: пользовательские маркеры нельзя нажимать на мобильных устройствах

2

У нас есть сайт, который использует Google Maps API v3 для отображения группы маркеров на карте. Маркеры кликабельны и открывают стандартное всплывающее окно с информацией о Картах Google.

Это прекрасно работает на всех настольных браузерах. Но по какой-то причине я не могу заставить его работать на любом мобильном устройстве, которое я тестировал (на разных устройствах Android и iOS). Маркеры просто не реагируют на щелчки.

Я сузил его до наших пользовательских маркеров. Если я удаляю код, который загружает наши пользовательские изображения маркеров, используяnew google.maps.MarkerImage(), то работает нормально.

var marker = new google.maps.Marker(
    var markerOptions = {
        icon : new google.maps.MarkerImage(
            mURL, new google.maps.Size(mWidth,mHeight),
            new google.maps.Point(0,0),new google.maps.Point(anchorX,anchorY)
        ),
        flat: true,
        position: point,
        visible: true,
        title: title,
        zIndex: zIndex,
        map: map,
    }
);

google.maps.event.addListener(marker,'click',function() { ...... });

Приведенный выше код прекрасно работает во всех браузерах настольных компьютеров, но не работает во всех мобильных браузерах. Однако, если я удаляю пользовательскую графику (то есть свойство «icon»), она работает нормально.

Есть идеи? Я вытаскиваю свои волосы!

Возможно, вы нашли функцию или даже ошибку. Вы пытались удалить размер (даже временно в качестве теста), чтобы увидеть, нормально ли работают нестандартные маркеры? Или другие атрибуты? Пользовательские маркерыare обрабатываются по-разному. Andrew Leach
Я могу подтвердить, что «подписано» парам виновник Cameron Drake
@AndrewLeach - я нашел это. Я опубликую его как ответ, слишком длинный для комментария, но краткий ответ - да, похоже, это странность в том, как работает API между различными платформами. SDC

Ваш Ответ

4   ответа
0

MarkerImage( Парен нигде не закрывается, это то, что его ломает.

Error: User Rate Limit Exceeded SDC
Error: User Rate Limit Exceededstackoverflow.com/a/9000241/961847
Error: User Rate Limit Exceeded SDC
1

поэтому, если вы пытаетесь заставить события кликов на маркерах карты работать на мобильных устройствах, просто убедитесь, что вы привязываетесь к событию mousedown, а не к событию click.

google.maps.event.addListener(marker, 'mousedown', function);
7

Основной причиной проблемы было то, что наш код предоставлял размер маркера и свойства привязки в виде строк, тогда как API Карт ожидает, что они будут целыми числами. Значения загружаются из базы данных и передаются в Javascript из программы PHP. Поэтому было исправлено приведение значений PHP к(int) при создании массива, который выводится как JSON.

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

Это несоответствие в API Карт означало, что оно избежало наших первоначальных проверок работоспособности, когда код был написан, и усложнило отладку после обнаружения проблемы.

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

Error: User Rate Limit ExceededdoesError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded SDC
Error: User Rate Limit Exceeded
0

Ни клик / mousedown, ни масштабирование с помощью int не решили проблему для меня.

После отладки с помощью удаленного инспектора Chrome, я обнаружил, что div-gt; рамка с непрозрачностью: 0 лежала выше (явный z-index: 2) маркеры, на которые можно нажимать.

Я не знаю, для чего предназначен этот кадр.

Вы можете удалить этот фрейм, удалив & quot; signature_in & quot; из тега сценария:

-    <script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=googlemapsloaded"></script>
+    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=googlemapsloaded"></script>

Похожие вопросы