在標記中使用SVG錨定圖像

我遇到以下代碼的問題。
正如你所看到的，它在水上畫了一個「T」，這很好，正是我在這個例子中想要的。
現在的問題是我想設置錨點。
如果您在標記中的錨線發表評論，您會看到T完全搞砸了。而不是僅僅移動一點點，這樣T的腳就是錨。
這是一個錯誤，那麼我希望它得到修復。
是否有一種解決方法，除了重新計算所有路徑座標之外，如何才能正確工作？在標記中使用SVG錨定圖像

 
<!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>

來源

2012-10-09 Vampire

的問題是，要使用的命令m其移動筆來指定點的x，y 相對到當前筆位置。當你改變你的錨點時，你並不是一致地抵消所有點，而是用一個影響它們彼此相對的錨點來扭曲它們。（我不確定我在解釋這一點）。 M & L使用x y點，m和l使用相對 x y點。

在這裏，我用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-10 20:16:18

在標記中使用SVG錨定圖像

回答

相關問題