Google Maps API v3：自定义标记无法在移动设备上点击 [英] Google Maps API v3: custom markers not clickable on mobile devices

问题描述

我们有一个网站使用Google Maps API v3在地图上显示一堆标记。标记是可点击的，并打开标准的Google Maps信息弹出窗口。

这适用于所有桌面浏览器。但由于某种原因，我无法在我测试过的任何移动设备（各种Android和iOS设备）上工作。标记根本不会对点击做出响应。

我将它缩小到我们的自定义标记。如果我使用 new google.maps.MarkerImage（）删除加载自定义标记图片的代码，那么它可以正常工作。

pre> var marker = new google.maps.Marker（
var markerOptions = {
图标：new google.maps.MarkerImage（
mURL，新的google.maps.Size（mWidth，mHeight），
新的google.maps.Point（0,0），新的google.maps.Point（anchorX，anchorY）
），
flat ：true，
position：point，
visible：true，
title：title，
zIndex：zIndex，
map：map，
}
）;

google.maps.event.addListener（marker，'click'，function（）{......}）;


以上代码适用于所有桌面浏览器，但在所有移动浏览器中均失败。但是，如果我删除自定义图形（即'图标'属性），它工作正常。

任何想法？

解决方案

找到它！

问题的根本原因是我们的代码将标记大小和锚定属性作为字符串提供，而Maps API期望它们是整数。这些值从数据库加载并从PHP程序提供给Javascript。因此，修正是在创建以JSON格式输出的数组时将PHP值转换为（int）。

这是一个非常微妙的问题：在桌面浏览器上，Maps API似乎能够很好地应对这些以字符串形式提供的参数。它只在移动浏览器上失败。

Maps API中的这种不一致意味着它在编写代码时逃脱了我们最初的完整性检查，并且很难调试一旦发现问题。

因此，尽管根本原因是我们提供了错误的数据类型，但我认为这种不一致会成为API中的错误。 / p>

We have a site that uses Google Maps API v3 to display a bunch of markers on the map. The markers are clickable, and open a standard Google Maps info popup.

This works great on all desktop browsers. But for some reason, I can't make it work on any mobile device that I've tested (a variety of Android and iOS devices). The markers simply don't respond to clicks.

I've narrowed it down to our custom markers. If I remove the code that loads our custom marker images using new google.maps.MarkerImage(), then it works fine.

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() { ...... });

The above code works fine on all desktop browsers, but fails in all mobile browsers. However, if I remove the custom graphic (ie the 'icon' property), it works fine.

Any ideas? I'm pulling my hair out!

解决方案

Found it!

The root cause of the problem was that our code was providing the marker size and anchor properties as strings, whereas the Maps API expects them to be integers. The values are being loaded from a database and provided to Javascript from a PHP program. The fix was therefore to cast the PHP values to (int) when creating the array that is output as JSON.

This was a very subtle problem to find: on desktop browsers the Maps API seems to cope just fine with these arguments being provided as strings. It's only on mobile browsers that it fails.

This inconsistency in the Maps API meant that it escaped our initial sanity checks when the code was written, and made it very difficult to debug once the issue had been found.

So despite the root cause being us providing the wrong data type, I would consider inconsistencies like this to be bugs in the API.

这篇关于Google Maps API v3：自定义标记无法在移动设备上点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！