javascript – Google Maps API v3：自定义标记在移动设备上无法点击

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

这适用于所有桌面浏览器.但由于某些原因,我无法在我测试的任何移动设备(各种Android和iOS设备)上使用它.标记根本不响应点击.

我把它缩小到我们的自定义标记.如果我删除使用新的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’属性),它可以正常工作.

有任何想法吗？我把头发拉出来！

解决方法:

找到了！

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

这是一个非常微妙的问题：在桌面浏览器上,Maps API似乎能很好地处理这些以字符串形式提供的参数.它仅在移动浏览器上失败.

Maps API中的这种不一致意味着它在编写代码时逃过了我们最初的健全性检查,并且一旦发现问题就很难调试.

因此,尽管根本原因是我们提供了错误的数据类型,但我认为这样的不一致是API中的错误.

标签：javascript,mobile,google-maps-api-3,google-maps-markers
来源： https://codeday.me/bug/20191008/1875087.html