SVG图标指向另一个标记的方向

Question

我正在制作一个Google地图应用程序，其中有一个代表街景的摄像机图标和另一个代表任何位置的图标。

见小提琴：

http://jsfiddle.net/uepc2f8n/52/

如果我取消注释“//google.maps.SymbolPath.FORWARD_CLOSED_ARROW”，则可以正常使用！但是当我放置相机路径时，位置不会到达正确的位置。

我对SVG Path了解不多，这很复杂！

如何将相机镜头指向我的标记方向？

代码段（来自链接小提琴）：

function initialize() {
  var direction = new google.maps.LatLng(52.376423, 4.887234);
  var station = new google.maps.LatLng(52.155401, 5.118824);

  var mapProperties = {
    center: direction,
    zoom: 10
  };

  var map = new google.maps.Map(document.getElementById("map-canvas"), mapProperties);

  var directionMarker = new google.maps.Marker({
    position: direction,
    map: map,
    draggable: true,
    title: "test"
  });

  var heading = google.maps.geometry.spherical.computeHeading(direction, station);

  directionMarker.setIcon({
    path: "M17 -5.5V-15c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z", //google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
    scale: 2,
    rotation: heading
  });

  var stationMarker = new google.maps.Marker({
    position: station,
    map: map,
  });

  var polyline = new google.maps.Polyline({
    path: [direction, station],
    geodesic: true,
    strokeColor: "#ff0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
  polyline.setMap(map);
}

initialize();

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

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry"></script>
<div id="map-canvas"></div>

Answer 1

您需要为特定符号正确设置SVG符号的anchor和rotation。在我看来你想要一个{3}的anchor和一个90度的旋转。

anchor: new google.maps.Point(3, -10),
rotation: heading - 90

updated fiddle

代码段

＆＃13;

＆＃13;

function initialize() {
  var direction = new google.maps.LatLng(52.376423, 4.887234);
  var station = new google.maps.LatLng(52.155401, 5.118824);

  var mapProperties = {
    center: direction,
    zoom: 10
  };

  var map = new google.maps.Map(document.getElementById("map-canvas"), mapProperties);

  var directionMarker = new google.maps.Marker({
    position: direction,
    map: map,
    draggable: true,
    title: "test"
  });

  var heading = google.maps.geometry.spherical.computeHeading(direction, station);

  directionMarker.setIcon({
    path: "M17 -5.5V-15c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z",
    scale: 2,
    anchor: new google.maps.Point(3, -10),
    rotation: heading - 90
  });
  var stationMarker = new google.maps.Marker({
    position: station,
    map: map,
  });
  var polyline = new google.maps.Polyline({
    path: [direction, station],
    geodesic: true,
    strokeColor: "#ff0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
  polyline.setMap(map);
  var bounds = new google.maps.LatLngBounds();
  bounds.extend(station);
  bounds.extend(direction);
  map.fitBounds(bounds);
}

google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

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

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map-canvas"></div>

＆＃13;

＆＃13;

＆＃13;