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ポイントを使用します。

ここでは、暗黙のMoveTo（m）ステートメントをLineTo（L）に置き換えました。（開始点も実際に何かを指すように移動したので、アンカーを変更するとパスが均一に移動することがわかります。参照用の基本的なマーカーもあります）。

<!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 に答える