堆棧內存溢出
  簡體   English   中英

使用谷歌地圖javascript旋轉具有多個路徑的svg標記

[英]rotate svg marker with multiple paths using google maps javascript

 原文  2017-09-25 10:45:07  1   1    javascript/ google-maps/ svg/ google-maps-api-3/ google-maps-markers

問題描述

當我使用下面的簡單 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>

簡單的SVG

復雜的SVG

我應該怎么做才能解決這個問題？

1 個解決方案

解決方案1
 7 已采納  2017-09-26 00:54:08

要顯示完整的 SVG 圖標（及其所有路徑），請將其另存為文件，然后將其用作標記的 URL。

相關問題： 使用 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, optimized: false, icon: { url: "https://www.geocodezip.net/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="https://www.geocodezip.net/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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map_canvas"></div> <img src="https://www.geocodezip.net/mapIcons/SO_20170925_multiplePaths_mod.svg" />

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 在谷歌地圖上旋轉標記 使用Google Maps API旋轉標記 未出現 Google 地圖上的 SVG 標記 帶有動畫的Google Maps SVG標記 是否可以將動畫 svg 分配給 google Maps JavaScript API 中的標記符號？ 使用 Google Maps API 旋轉 SVG 符號以匹配飛機航向 旋轉自定義標記Google Maps API 谷歌無法映射api旋轉標記 具有 PNG 后備功能的 Google 地圖 SVG 標記 無法在Google Maps Symbols（svg）標記中填充FillColor
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM