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

本文介绍了使用谷歌地图的多个路径旋转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/> 
  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/> 
  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/> 
  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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！