0

我对以下代码有疑问。
正如你所看到的，它在水上画了一个“T”，这很好，正是我在这个例子中想要的。
现在的问题是我想设置锚点。
如果您在标记中的锚线中添加注释，您会看到 T 完全搞砸了。而不是只是移动一点，以便 T 的脚是锚。
这是一个错误，那么我希望它得到修复。
除了重新计算所有路径坐标（如果可行的话）之外，是否有一种解决方法如何让它正常工作？

<!DOCTYPE html>
<html>
  <head>
    <link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
      function initialize() {
        var mapOptions = {
          zoom: 8,
          center: new google.maps.LatLng(40, -150),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        new google.maps.Marker({
          icon: {
              //anchor: new google.maps.Point(8.1328125, 17),
              path: 'm 7.1855469,17 0,-12.6269531 -4.7167969,0 0,-1.6894531 11.347656,0 0,1.6894531 -4.7363279,0 0,12.6269531 z'
          },
          position: new google.maps.LatLng(40, -150),
          map: map
        });
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas"></div>
  </body>
</html>
4

1 回答 1

2

问题是您正在使用将笔移动到相对于当前笔位置m的指定点 x,y的命令。当您更改锚点时，您不会均匀地偏移所有点，而是使用锚点扭曲它们，从而影响它们彼此之间的关系。（我不确定我是否在解释这一点）。M & L 使用 xy 点，m 和 l 使用相对xy 点。

在这里，我用 LineTo (L) 替换了您隐含的 MoveTo (m) 语句。（我还移动了您的起点，使其实际上指向某个东西，因此您可以看到更改锚点如何均匀地移动路径。还有一个基本标记供参考）。

<!DOCTYPE html>
<html>

<head>
  <link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css"
    rel="stylesheet">
  <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script>
    function initialize() {
      var mapOptions = {
        zoom: 21,
        center: new google.maps.LatLng(40, -83),
        mapTypeId: google.maps.MapTypeId.SATELLITE
      };

      var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

      new google.maps.Marker({
        icon: {
          anchor: new google.maps.Point(6, 15),
          path: 'm 0,0 L12,0 L12,2 L7,2 L7,14 L5,14 L5,2 L0,2 z',
          scale: 5,
          strokeColor: 'red'
        },
        position: new google.maps.LatLng(40, -83),
        map: map
      });


      // I am a reference marker
      new google.maps.Marker({
        position: new google.maps.LatLng(40, -83),
        map: map
      });
    }
  </script>
</head>

<body onload="initialize()">
  <div id="map_canvas"></div>
</body>

</html>
于 2012-10-10T20:16:18.647 回答