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

问题描述：

我们有一个网站使用Google Maps API v3在地图上显示一堆标记。标记是可点击的，并打开标准的Google地图信息弹出窗口。Google Maps API v3：自定义标记无法在移动设备上点击

这适用于所有桌面浏览器。但出于某种原因，我无法在我测试过的任何移动设备（各种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() { ...... });

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

任何想法？我正在拉我的头发！

有可能你已经找到了功能，甚至是错误。你是否尝试过去除大小（即使暂时作为测试）以查看未标记的标记是否正常工作？或其他属性？自定义标记*的处理方式不同。 – 2012-04-10 17:18:07

@AndrewLeach - 我找到了。我会将它作为答案张贴太长的评论，但简短的回答是肯定的，这似乎是API在不同平台之间工作的一个怪癖。 – SDC 2012-04-11 08:09:27

我可以确认'signed_in'参数是罪魁祸首 – 2016-12-09 05:41:02

答

找到了！

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

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

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

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

很高兴你找到它。我不确定这是一个错误：API的行为与文档一样（即给出它期望的结果，它会起作用;意想不到的结果会导致未定义的结果）。事实上，它*可以*在桌面浏览器中工作，如果你给它一些意想不到的东西是一种奖励，而不是一个错误。我怀疑，如果有一个“修复”，它将是确保它在输入错误的情况下失败！ – 2012-04-11 09:59:54

@AndrewLeach - 我同意，但我仍然说它是一个错误，因为（a）它在平台之间不一致，（b）如果确实失败了，问题只会显示在更深的位置，使得很难找到源的问题。我对Google的建议是：（a）使平台之间保持一致;（b）如果它失败，请在创建标记点时抛出错误，而不是让标记显示正常，但不能点击。我们花了很多年试图调试我们的点击事件，然后才发现它实际上是造成问题的标记创建。 – SDC 2012-04-12 10:52:32

这让我从很多小时的挫折中解脱出来。非常感谢！ – GEMI 2012-05-25 12:09:48

答

因为MarkerImage( paren不关闭任何地方，是什么打破它。

感谢您的回答。我的复制+粘贴到问题中可能并不完美（我必须从更复杂的函数中提取相关代码），但代码在原始代码中很好 - 如前所述，代码在桌面上运行时工作良好浏览器。 – SDC 2012-04-10 14:55:26

嗯...有关？ http://*.com/a/9000241/961847 – mikevoermans 2012-04-10 15:04:58

嗯，这个问题的问题听起来很相似。可悲的是，给出的答案并不是我的问题的解决方案（我们不在循环中，而且我对闭包很满意）。但是，谢谢你的努力。这是迄今为止我看到的最相关的链接，即使它没有帮助。 :-) – SDC 2012-04-10 15:30:21

答

这在api中没有提及，所以如果你想让地图标记上的点击事件在移动设备上工作，只要确保你绑定到mousedown事件而不是click事件。

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

答

无论是点击/ mousedown还是使用scale来解决我的bug。

使用chrome远程检测器进行调试后，发现一个div->不透明度为0的帧位于可点击标记的上方（显式z-index：2）。

我不知道这个框架是什么。

您可以通过脚本标记删除“signed_in”删除此框架：

- <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>

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

相关推荐