使用谷歌地图的多个路径旋转svg标记javascript [英] rotate svg marker with multiple paths using google maps javascript

查看：190
本文介绍了使用谷歌地图的多个路径旋转svg标记javascript的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当我使用下面的简单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.6381- 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 = {
路径：汽车，
比例：.7，
 strokeColor：'white'，
 strokeWeight：.10，
 fillOpacity：1，
 fillColor：'＃404040'，
 offset：'5％'，
 anchor：new google.maps.Point（10，25）
} ;

如下所示： 

 函数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 =标题; 
 marker.setIcon（icon）; 
 updatePoly（d）; 
 timerHandle = setTimeout（animate（+ index +，+（d + step）+），tick）; 
}

但是当我用另一个复杂的SVG（多色）不再工作： 

 < svg version =1.1id =Layer_2xmlns =http：// www .w3.org / 2000 / svgxmlns：xlink =http://www.w3.org/1999/xlinkx =0pxy =0px
 width =20pxheight = 60pxviewBox =0 0 47.333 101.667enable-background =new 0 0 47.333 101.667
 xml：space =preserve> 
  c0-1.096,1.076-1.484,2.244-1.484h34.153c1.169,0,1.602,0.388,1.602,1.484V27.849z/> 
  c0-1.096,0.742-1.484,1.921-1.484H41.05c1.179,0,1.617,0.388,1.617,1.484V93.849z/> 
  c0-1.009,0.575-1.827,1.663-1.827h32.33c1.088,0,2.007,0.818,2.007,1.827V96.383z/> 
  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/> 
 <路径填充=＃45525Bd =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/> 
  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/> 
  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.1691-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/> 
  h24.649c1.134,0,2.189,0.895,2.189,2V28.333z/> 
  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/> 
  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> 
  c0.552,0,1,0.448,1,1V48.333z/> 
  c0,0.552,0.448,1,1,1h0.283C17.289,45.494,21.476,42.458,26.604,42.458z/> 
< / g> 
  c0.552,0,1,0.448,1,1V91.333z/> 
 <路径填充=＃424F58d =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> 
  c0.115,0,0.542-0.147,0.542,0.289v11.838c0,0.436-0.427,0.873-0.542,0.873H38.875z/> 
  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> 
  c0.115,0,0.542-0.147,0.542,0.289v11.838c0,0.436-0.427,0.873-0.542,0.873H38.875z/> 
 <路径填充=＃424F58d =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> 
  c-0.115,0-0.208-0.437-0.208-0.873V28.622c0-0.436,0.093-0.289,0.208-0.289H8.125z/> 
  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> 
  c0.115,0,0.542-0.147,0.542,0.289v11.838c0,0.436-0.427,0.873-0.542,0.873H38.875z/> 
  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> 
  c0.115,0,0.542,0.186,0.542,0.622v11.838c0,0.436-0.427,0.539-0.542,0.539H38.875z/> 
  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/> gt ; 
< / g> 
< g> 
  c0.115,0,0.542-0.147,0.542,0.289v11.838c0,0.436-0.427,0.873-0.542,0.873H38.875z/> 
  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> 
  c0.115,0,0.542-0.147,0.542,0.289v11.838c0,0.436-0.427,0.873-0.542,0.873H6.875z/> 
  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> 
  c0.115,0,0.542-0.147,0.542,0.289v11.838c0,0.436-0.427,0.873-0.542,0.873H6.875z/> 
  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> 
  c0.115,0,0.542,0.186,0.542,0.622v11.838c0,0.436-0.427,0.539-0.542,0.539H6.875z/> 
  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> 
  c0.115,0,0.542-0.147,0.542,0.289v11.838c0,0.436-0.427,0.873-0.542,0.873H6.875z/> 
  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>



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，optimization：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/zh_CN/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）; 

  html，body，＃map_canvas {height：100％;宽度：100％; margin：0px; padding：0px} .mapLabels {color：white}

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


When I use the below simple SVG it works well with the rotation method 

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)
};

as shown below:

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);
}

but When I replace it with another complex SVG (Multi color) the rotation does not work any more:

<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

what should i do to fix this issue?

解决方案

To show the complete SVG icon (with all its paths), save it as a file, then use that as the URL for the marker.

Related question: Rotate marker on google maps with svg

proof of concept fiddle

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);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

.mapLabels {
  color: "white"
}

<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" />

这篇关于使用谷歌地图的多个路径旋转svg标记javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆