Question

当我使用下面简单的SVG时，它适用于旋转方法

var car = "M17.402,0H5.643C2.526,0,0,3.467,0,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759c3.116,0,5.644-2.527,5.644-5.644 V6.584C23.044,3.467,20.518,0,17.402,0z M22.057,14.188v11.665l-2.729,0.351v-4.806L22.057,14.188z M20.625,10.773 c-1.016,3.9-2.219,8.51-2.219,8.51H4.638l-2.222-8.51C2.417,10.773,11.3,7.755,20.625,10.773z M3.748,21.713v4.492l-2.73-0.349 V14.502L3.748,21.713z M1.018,37.938V27.579l2.73,0.343v8.196L1.018,37.938z M2.575,40.882l2.218-3.336h13.771l2.219,3.336H2.575z M19.328,35.805v-7.872l2.729-0.355v10.048L19.328,35.805z";

var icon = {
path: car,
scale: .7,
strokeColor: 'white',
strokeWeight: .10,
fillOpacity: 1,
fillColor: '#404040',
offset: '5%',
anchor: new google.maps.Point(10, 25)
};

如下图所示：

function animate(d) {
    if (d > eol) {

        marker.setPosition(endLocation.latlng);
        return;
    }
    var p = polyline.GetPointAtDistance(d);
    //map.panTo(p);
    var lastPosn = marker.getPosition();
    marker.setPosition(p);
    var heading = google.maps.geometry.spherical.computeHeading(lastPosn, p);
    icon.rotation = heading;
    marker.setIcon(icon);
    updatePoly(d);
    timerHandle = setTimeout("animate(" + index + "," + (d + step) + ")", tick);
}

但是当我用另一个复杂的SVG（多色）替换它时，旋转不再起作用了：

<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="20px" height="60px" viewBox="0 0 47.333 101.667" enable-background="new 0 0 47.333 101.667"
     xml:space="preserve">
<path fill="#E58E1A" d="M42.667,27.849c0,1.096-0.434,2.484-1.602,2.484H6.911c-1.169,0-2.244-1.388-2.244-2.484V14.818
    c0-1.096,1.076-1.484,2.244-1.484h34.153c1.169,0,1.602,0.388,1.602,1.484V27.849z"/>
<path fill="#E58E1A" d="M42.667,93.849c0,1.096-0.438,2.484-1.617,2.484H6.588c-1.179,0-1.921-1.388-1.921-2.484V80.818
    c0-1.096,0.742-1.484,1.921-1.484H41.05c1.179,0,1.617,0.388,1.617,1.484V93.849z"/>
<path fill="#FCB040" d="M41.667,96.383c0,1.009-0.919,1.95-2.007,1.95H7.33c-1.088,0-1.663-0.941-1.663-1.95V24.16
    c0-1.009,0.575-1.827,1.663-1.827h32.33c1.088,0,2.007,0.818,2.007,1.827V96.383z"/>
<path fill="#F2A339" stroke="#F7931E" stroke-miterlimit="10" d="M23.062,15.586c6.86,0,13.104,2.407,16.104,5.972V10.077
    c0-0.6,0.151-1.13-0.226-1.491c-1.777-4.399-7.782-5.348-15.185-5.348c-7.403,0-13.898,0.949-15.675,5.348
    c-0.377,0.361-0.914,0.891-0.914,1.491v11.261C11.167,17.896,16.346,15.586,23.062,15.586z"/>
<path fill="#45525B" d="M23.073,24.249c6.134,0,11.593,2.152,14.593,5.34V19.323c0-0.536-0.422-1.011-0.759-1.333
    c-1.588-3.933-7.237-4.781-13.855-4.781c-6.619,0-12.203,0.848-13.791,4.781c-0.337,0.323-0.594,0.797-0.594,1.333v10.069
    C11.667,26.313,17.068,24.249,23.073,24.249z"/>
<path fill="#050E22" d="M9.348,25.917L4.34,27.635l-0.65,0.223c-0.359,0.123-0.55,0.514-0.427,0.873l0.223,0.65
    c0.123,0.359,0.494,0.493,0.853,0.37l0.65-0.223c0.359-0.123,0.325-1.169,0.325-1.169l4.357-1.495
    c0.359-0.123,0.61-0.337,0.487-0.696C10.036,25.808,9.706,25.794,9.348,25.917z"/>
<path fill="#050E22" d="M38.07,25.917l5.007,1.718l0.65,0.223c0.359,0.123,0.55,0.514,0.427,0.873l-0.223,0.65
    c-0.123,0.359-0.494,0.493-0.853,0.37l-0.65-0.223c-0.359-0.123-0.325-1.169-0.325-1.169l-4.357-1.495
    c-0.359-0.123-0.61-0.337-0.487-0.696C37.381,25.808,37.711,25.794,38.07,25.917z"/>
<path fill="#45525B" d="M37.667,28.333c0,1.105-1.055,2-2.189,2H10.829c-1.134,0-2.162-0.895-2.162-2v-3c0-1.105,1.028-2,2.162-2
    h24.649c1.134,0,2.189,0.895,2.189,2V28.333z"/>
<path fill="#314349" d="M27.135,17c3.704,0,7.209,0.677,10.101,1.831c-0.107-0.33-0.271-0.623-0.5-0.841
    c-1.588-3.933-7.151-4.781-13.77-4.781s-12.16,0.848-13.748,4.781c-0.337,0.323-0.551,0.797-0.551,1.333v7.688
    C9.667,21.373,17.676,17,27.135,17z"/>
<path fill="#F9BB42" stroke="#FBB03B" stroke-miterlimit="10" d="M23.015,15.586c5.949,0,11.548,0.836,14.714,4.402l-1.433-9.911
    c0-0.6-0.493-1.13-0.82-1.491c-1.541-4.399-6.006-5.348-12.426-5.348c-6.42,0-10.899,0.949-12.44,5.348
    c-0.327,0.361-0.694,0.891-0.694,1.491L8.86,19.552C12.026,16.11,17.19,15.586,23.015,15.586z"/>
<g>
    <path fill="#4F6671" d="M32.667,48.333c0,0.552-0.448,1-1,1h-15c-0.552,0-1-0.448-1-1v-6c0-0.552,0.448-1,1-1h15
        c0.552,0,1,0.448,1,1V48.333z"/>
    <path fill="#424F58" d="M26.604,42.458c2.296,0,4.402,0.611,6.063,1.627v-1.752c0-0.552-0.448-1-1-1h-15c-0.552,0-1,0.448-1,1v6
        c0,0.552,0.448,1,1,1h0.283C17.289,45.494,21.476,42.458,26.604,42.458z"/>
</g>
<path fill="#4F6671" d="M32.667,91.333c0,0.552-0.448,1-1,1h-15c-0.552,0-1-0.448-1-1v-6c0-0.552,0.448-1,1-1h15
    c0.552,0,1,0.448,1,1V91.333z"/>
<path fill="#424F58" d="M26.604,85.458c2.296,0,4.402,0.611,6.063,1.627v-1.752c0-0.552-0.448-1-1-1h-15c-0.552,0-1,0.448-1,1v6
    c0,0.552,0.448,1,1,1h0.283C17.289,88.494,21.476,85.458,26.604,85.458z"/>
<g>
    <g>
        <path fill="#4F6671" d="M38.875,55.333c-0.115,0-0.208-0.437-0.208-0.873V42.622c0-0.436,0.093-0.289,0.208-0.289h1.25
            c0.115,0,0.542-0.147,0.542,0.289v11.838c0,0.436-0.427,0.873-0.542,0.873H38.875z"/>
        <path fill="#424F58" d="M40.099,50.507c0,1.812-0.127,3.826-0.339,4.826h0.365c0.115,0,0.542-0.437,0.542-0.873V42.622
            c0-0.436-0.427-0.289-0.542-0.289h-1.25c-0.115,0-0.208-0.147-0.208,0.289v0.223C39.466,43.113,40.099,46.459,40.099,50.507z"/>
    </g>
    <g>
        <path fill="#4F6671" d="M38.875,40.333c-0.115,0-0.208-0.437-0.208-0.873V27.622c0-0.436,0.093-0.289,0.208-0.289h1.25
            c0.115,0,0.542-0.147,0.542,0.289v11.838c0,0.436-0.427,0.873-0.542,0.873H38.875z"/>
        <path fill="#424F58" d="M40.099,35.507c0,1.812-0.127,3.826-0.339,4.826h0.365c0.115,0,0.542-0.437,0.542-0.873V27.622
            c0-0.436-0.427-0.289-0.542-0.289h-1.25c-0.115,0-0.208-0.147-0.208,0.289v0.223C39.466,28.113,40.099,31.459,40.099,35.507z"/>
    </g>
    <g>
        <path fill="#4F6671" d="M8.125,28.333c0.115,0,0.542-0.147,0.542,0.289v11.838c0,0.436-0.427,0.873-0.542,0.873h-1.25
            c-0.115,0-0.208-0.437-0.208-0.873V28.622c0-0.436,0.093-0.289,0.208-0.289H8.125z"/>
        <path fill="#424F58" d="M7.068,32.868c0-1.812-0.039-3.535,0.172-4.535H6.875c-0.115,0-0.208-0.147-0.208,0.289v11.838
            c0,0.436,0.093,0.873,0.208,0.873h1.25c0.115,0,0.542-0.437,0.542-0.873v-0.223C7.667,39.969,7.068,36.915,7.068,32.868z"/>
    </g>
    <g>
        <path fill="#4F6671" d="M38.875,69.333c-0.115,0-0.208-0.437-0.208-0.873V56.622c0-0.436,0.093-0.289,0.208-0.289h1.25
            c0.115,0,0.542-0.147,0.542,0.289v11.838c0,0.436-0.427,0.873-0.542,0.873H38.875z"/>
        <path fill="#424F58" d="M40.099,64.507c0,1.812-0.127,3.826-0.339,4.826h0.365c0.115,0,0.542-0.437,0.542-0.873V56.622
            c0-0.436-0.427-0.289-0.542-0.289h-1.25c-0.115,0-0.208-0.147-0.208,0.289v0.223C39.466,57.113,40.099,60.459,40.099,64.507z"/>
    </g>
    <g>
        <path fill="#4F6671" d="M38.875,83.333c-0.115,0-0.208-0.104-0.208-0.539V70.956c0-0.436,0.093-0.622,0.208-0.622h1.25
            c0.115,0,0.542,0.186,0.542,0.622v11.838c0,0.436-0.427,0.539-0.542,0.539H38.875z"/>
        <path fill="#424F58" d="M40.099,78.674c0,1.812-0.127,3.66-0.339,4.66h0.365c0.115,0,0.542-0.103,0.542-0.539V70.956
            c0-0.436-0.427-0.622-0.542-0.622h-1.25c-0.115,0-0.208,0.186-0.208,0.622v0.223C39.466,71.447,40.099,74.626,40.099,78.674z"/>
    </g>
    <g>
        <path fill="#4F6671" d="M38.875,97.333c-0.115,0-0.208-0.437-0.208-0.873V84.622c0-0.436,0.093-0.289,0.208-0.289h1.25
            c0.115,0,0.542-0.147,0.542,0.289v11.838c0,0.436-0.427,0.873-0.542,0.873H38.875z"/>
        <path fill="#424F58" d="M40.099,92.507c0,1.812-0.127,3.826-0.339,4.826h0.365c0.115,0,0.542-0.437,0.542-0.873V84.622
            c0-0.436-0.427-0.289-0.542-0.289h-1.25c-0.115,0-0.208-0.147-0.208,0.289v0.223C39.466,85.113,40.099,88.459,40.099,92.507z"/>
    </g>
</g>
<g>
    <g>
        <path fill="#4F6671" d="M6.875,55.333c-0.115,0-0.208-0.437-0.208-0.873V42.622c0-0.436,0.093-0.289,0.208-0.289h1.25
            c0.115,0,0.542-0.147,0.542,0.289v11.838c0,0.436-0.427,0.873-0.542,0.873H6.875z"/>
        <path fill="#424F58" d="M8.099,50.507c0,1.812-0.127,3.826-0.339,4.826h0.365c0.115,0,0.542-0.437,0.542-0.873V42.622
            c0-0.436-0.427-0.289-0.542-0.289h-1.25c-0.115,0-0.208-0.147-0.208,0.289v0.223C7.466,43.113,8.099,46.459,8.099,50.507z"/>
    </g>
    <g>
        <path fill="#4F6671" d="M6.875,69.333c-0.115,0-0.208-0.437-0.208-0.873V56.622c0-0.436,0.093-0.289,0.208-0.289h1.25
            c0.115,0,0.542-0.147,0.542,0.289v11.838c0,0.436-0.427,0.873-0.542,0.873H6.875z"/>
        <path fill="#424F58" d="M8.099,64.507c0,1.812-0.127,3.826-0.339,4.826h0.365c0.115,0,0.542-0.437,0.542-0.873V56.622
            c0-0.436-0.427-0.289-0.542-0.289h-1.25c-0.115,0-0.208-0.147-0.208,0.289v0.223C7.466,57.113,8.099,60.459,8.099,64.507z"/>
    </g>
    <g>
        <path fill="#4F6671" d="M6.875,83.333c-0.115,0-0.208-0.104-0.208-0.539V70.956c0-0.436,0.093-0.622,0.208-0.622h1.25
            c0.115,0,0.542,0.186,0.542,0.622v11.838c0,0.436-0.427,0.539-0.542,0.539H6.875z"/>
        <path fill="#424F58" d="M8.099,78.674c0,1.812-0.127,3.66-0.339,4.66h0.365c0.115,0,0.542-0.103,0.542-0.539V70.956
            c0-0.436-0.427-0.622-0.542-0.622h-1.25c-0.115,0-0.208,0.186-0.208,0.622v0.223C7.466,71.447,8.099,74.626,8.099,78.674z"/>
    </g>
    <g>
        <path fill="#4F6671" d="M6.875,97.333c-0.115,0-0.208-0.437-0.208-0.873V84.622c0-0.436,0.093-0.289,0.208-0.289h1.25
            c0.115,0,0.542-0.147,0.542,0.289v11.838c0,0.436-0.427,0.873-0.542,0.873H6.875z"/>
        <path fill="#424F58" d="M8.099,92.507c0,1.812-0.127,3.826-0.339,4.826h0.365c0.115,0,0.542-0.437,0.542-0.873V84.622
            c0-0.436-0.427-0.289-0.542-0.289h-1.25c-0.115,0-0.208-0.147-0.208,0.289v0.223C7.466,85.113,8.099,88.459,8.099,92.507z"/>
    </g>
</g>
</svg>

Simple SVG

Complex SVG

我该怎么做才能解决这个问题？

Answer 1

要显示完整的SVG图标（包含其所有路径），请将其另存为文件，然后将其用作标记的URL。

相关问题：Rotate marker on google maps with svg

proof of concept fiddle

＆＃13;

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    optimized: false,
    icon: {
      url: "http://www.geocodezip.com/mapIcons/SO_20170925_multiplePaths_mod.svg",
      anchor: new google.maps.Point(39, 60),
      size: new google.maps.Size(150, 150)
    },
  });
  var measle = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    optimized: false,
    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(3.5, 3.5)
    }
  })

  var rotationAngle = 10;
  google.maps.event.addListenerOnce(map, 'idle', function() {
    setInterval(function() {
      $('img[src="http://www.geocodezip.com/mapIcons/SO_20170925_multiplePaths_mod.svg"]').css({
        'transform': 'rotate(' + rotationAngle + 'deg)',
        'transform-origin': '39px 60px'
      });
      rotationAngle += 10;
      rotationAngle %= 360;
    }, 1000);
  });
}
google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

.mapLabels {
  color: "white"
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
<img src="http://www.geocodezip.com/mapIcons/SO_20170925_multiplePaths_mod.svg" />

＆＃13;

使用谷歌地图javascript旋转多个路径的svg标记

1 个答案: