Question

有没有办法让google.maps.SymbolPath.FORWARD_CLOSED_ARROW将图标的中心放在LatLng位置。似乎是把箭头指向那里。

我试图尝试锚，但无济于事。

这是我的示例代码：

    var marker=new google.maps.Marker({
position: new google.maps.LatLng(50.124462, -5.539994),
icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        scale: 8,
        strokeWeight: 2,
        fillColor: '#009933',
        fillOpacity: 1,
        rotation: 210,
        anchor: new google.maps.Point(0, 0)
      },
});
marker.setMap(map);

Answer 1

对于该符号，请使用（0,2.6）

的锚点

fiddle demonstrating that at various rotations

通过实验找到最简单的方法是移除旋转，然后使用锚点来查看它的位置。

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(50.124462, -5.539994),
    icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        scale: 8,
        strokeWeight: 2,
        fillColor: '#009933',
        fillOpacity: 1,
        rotation: 210,
        anchor: new google.maps.Point(0,2.6)
    },
});

working fiddle

工作代码段：

var map;

function init() {
  var startLatLng = new google.maps.LatLng(50.124462, -5.539994);

  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: startLatLng,
    zoom: 12
  });

  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(50.124462, -5.539994),
    map: map
  });
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(50.124462, -5.539994),
    icon: {
      path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
      scale: 8,
      strokeWeight: 2,
      fillColor: '#009933',
      fillOpacity: 1,
      rotation: 210,
      anchor: new google.maps.Point(0, 2.6)
    },
  });
  marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', init);

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

将中心谷歌映射到LatLon上的SymbolPath

1 个答案: