Question

我用svg在google地图中创建了一个标记，但是形状很复杂。用于拖动/点击的图像地图区域定义是一个矩形而不是滴水，（你可以在代码中试一试），那么＆＃39; MarkerShape的选择？

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Complex icons</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });

	var myMarker = {
    path: 'M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z',
    fillColor: 'yellow',
    fillOpacity: 0.8,
    scale: 1
  };
	
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
		draggable:true,
    icon: myMarker
    //,shape:????????????????????
  });
}
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?callback=initMap">
    </script>
  </body>
</html>

＆＃13;

Answer 1

将比例设置为小于1是否有问题？

e.g。（比例：0.2，）

很抱歉误解了这个问题！形状的真正答案是你应该用坐标复制近似形状。我没有时间生成确切的形状坐标，但是标记的“圆形部分”是这样的：

var shape = {
    coords: [60,60,60],
    type: 'circle'
};

这是标记形状的近似多边形：

var shape = {
    coords: [60,0, 90,15, 120,60, 90,120, 60, 180, 30,120, 0,60, 30,15, 60,0],
    type: 'poly'
};

但如果你想更精确，你应该给出更详细的坐标。最后将形状添加到标记：

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    draggable:true,
    icon: myMarker,
    shape: shape
});

我希望最终能有所帮助！

关于谷歌地图MarkerShape复杂形状的选项与v3

1 个答案: