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

时间:2019-03-24 16:27:27

标签: javascript google-maps google-maps-api-3

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

我尝试使用文档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方形可点击区域(请参见下图中的较暗区域):

Highlighted clickable area

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

1 个答案:

答案 0 :(得分:0)

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