Question

我刚刚开始测试Google Maps API v3.9中添加的新Symbol feature。我想在地图上有多个类似三角形的符号，我希望能够以编程方式旋转它们。我以前拥有的是一组png图像，其中每一个都是最后一个的副本，只旋转了10度（MyIcon_0，MyIcon_10，...，MyIcon350）。然后我会画出最接近我想要的旋转角度的图像。

使用新的符号功能似乎是一种更简单的方法，可以通过编程方式完全控制旋转和颜色。

使用SVG路径表示法，我定义了一个简单的三角形，并将其粘贴在Marker上，如下所示：

var markerOptions = {
   icon: {
        path: "M 0 5 L 20 5 L 10 40 z",
        rotation: rotationAngle,
        anchor: [something]
    },
    position: position
};

var marker = new Marker(markerOptions);

只要“rotationAngle”设置为0，这就可以正常工作，因为我知道锚点必须是什么才能将符号放在地图中的正确位置。我希望锚点始终位于三角形的“锐角”。

当我有另一个旋转角度时会出现问题。符号在矩形画布上绘制，并且画布的尺寸似乎会自动计算以最适合内部形状。旋转像这个三角形的符号时，您将拥有一个基于旋转具有不同尺寸的画布，这使得难以在地图上正确定位符号，因为锚似乎相对于画布尺寸设置。

如果我只能控制实际画布的大小，我将能够绘制符号，以便锚点始终位于画布的中心，然后就可以设置一个常量锚点。这有点可能吗？我正在考虑在形状周围绘制一个看不见的圆圈的可能性，这将确保保持画布大小不变，但我不太熟悉SVG路径表示法，我不知道这是否可能实现。

感谢任何有关此事的建设性反馈。

Answer 1

将你的锚设置为（10,20）。

var icon = {
        path: "M 0 5 L 20 5 L 10 40 z",
        scale: 1,
        strokeWeight: 2,
        fillColor: '#009933',
        fillOpacity: 0.001,
        anchor: new google.maps.Point(10, 20)
    };

working fiddle

工作代码段：

var map;
var angle = 0;
var marker;
var icon = {
  path: "M 0 5 L 20 5 L 10 40 z",
  scale: 1,
  strokeWeight: 2,
  fillColor: '#009933',
  fillOpacity: 0.001,
  anchor: new google.maps.Point(10, 20)
};

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 ptMarker = new google.maps.Marker({
    position: new google.maps.LatLng(50.124462, -5.539994),
    map: map,
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(4, 4)
    }
  });
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(50.124462, -5.539994),
    icon: icon
  });
  marker.setMap(map);
  var circleMarker = new google.maps.Marker({
    position: new google.maps.LatLng(50.124462, -5.539994),
    map: map,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 24,
      strokeWeight: 2,
      fillColor: '#009933',
      fillOpacity: 0.001,
      anchor: new google.maps.Point(0, 0)
    }
  });

  setInterval(function() {
    angle += 30;
    icon.rotation = angle;
    marker.setIcon(icon);
  }, 1000);

}

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>

在跟踪锚点的同时旋转符号

1 个答案: