时间戳

首页 > 解决方案 > 标记的形状 - 可点击区域

javascript - 标记的形状 - 可点击区域

问题描述

我正在尝试使用带有圆形图标的 Google 地图标记。我的问题是可点击区域是正方形而不是圆形。

我尝试使用文档https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerShape中定义的标记形状 正如我在这里看到的那样，您可以更改可点击区域标记。所以，我这样做了：

        map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(47.023578942,15.368335626 ),
          zoom: 8
        });

        m1 = new google.maps.Marker({
          position: new google.maps.LatLng(47.023578942,15.368335626 ),
          map: map,
          icon: {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 10,
            strokeColor: '#FF0000',
            fillColor: '#FF0000',
            fillOpacity: 1
          },
          shape: {coords: [0,0,50,50], type: "rect"}
        });
        m2 = new google.maps.Marker({
          position: new google.maps.LatLng(47.523578942,15.368335626 ),
          map: map,
          icon: {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 10,
            strokeColor: '#FF0000',
            fillColor: '#FF0000',
            fillOpacity: 1
          },
          shape: {coords: [0,0,500], type: "circle"}
        });

演示代码：https ://jsfiddle.net/6sm32nqc/1/

我预计可点击区域是其中一个标记（顶部）的圆圈，但没有任何改变。绘制相同的 46x46 正方形可点击区域（见下图中较暗的区域）：

突出显示的可点击区域

我不确定我在这里缺少什么:(。

标签： javascriptgoogle-mapsgoogle-maps-api-3

解决方案

这个问题似乎只发生在我的操作系统上。我尝试了 Chrome、FF 和 Opera，也使用了隐身模式，并且行为是相同的，每次都测试链接的 JSFiddle。如果我在不同的计算机或虚拟机上尝试，问题就会消失。

推荐阅读