Question

我对以下代码有疑问正如你所看到的，它在水面上绘制了一个“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>

Answer 1

问题是您正在使用命令m将笔移动到指定点x，y relative 到当前笔位置。当你改变你的锚时，你并没有统一地抵消所有的点，而是用一个锚来扭曲它们，这些锚相互影响它们。（我不确定我是在解释这个）。 M＆amp; L使用x y点，m和l使用 relative x y points。

这里我用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>

使用SVG路径锚定在Marker中将图像拧紧

1 个答案: