Google Haritalar'da bir işaretçi için SVG kullanın?

Google haritalarına svg bindirmeleri eklemenin mümkün olduğunu biliyorum. svg dosyalarını işaretçiler olarak kullanıp kullanamayacağınızı merak ediyorum. Sadece bir png veya jpg dosyası gibi ayarlamayı denedim, ama hiçbir şey ortaya çıkmadı. Kodumu göndermem gerekirse bana bildirin, ama sanırım yanlış bir şekilde yaklaşıyorum.Google Haritalar'da bir işaretçi için SVG kullanın?

Teşekkürler.

o (aynı zamanda boyutlandırma kolları olan) bu kodla benim için sadece iyi çalışıyor Google Maps API v3 üzerinde

kaynak

2010-10-15 vee

kimse bundan önce yapmış ... aşağıda pasajı kodu görüyor musunuz? – vee

herkes bu konuda yardımcı olabilir ... – vee

var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(lat, lng), 
    icon: new google.maps.MarkerImage('/path/to/icon.svg', 
    null, null, null, new google.maps.Size(64,64)), 
    draggable: false, 
    map: map 
});

kaynak

2012-08-31 11:18:11

bu şekilde, gmaps zaten bir etiketi yaratacaktır. bunun yerine bir Symbol (https://developers.google.com/maps/documentation/javascript/symbols) kullanmalısınız! – Khalizar

IE11'de uygulamaya koyma ile ilgili sorun yaşıyorsanız, herhangi bir sorunu çözmek için bu çözüme bakın: http://stackoverflow.com/questions/27261346/custom-svg-markers-wont-display-in-ie-11 –

Sadece bir not: svg dosyanızda animasyonunuz varsa, en iyileştirme seçeneğini, false – Scalpweb

Bunun ile ilgili bir sorun vardı ama bir kod editörü svg baktı ve tanımlı bir genişlik ve yükseklik eksikti.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    x="0px" y="0px" 
    viewBox="0 0 419.5 595.3" 
    enable-background="new 0 0 419.5 595.3" 
    xml:space="preserve">

codepen üzerinde

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    x="0px" y="0px" 
    width="33px" height="50px" 
    viewBox="0 0 419.5 595.3" 
    enable-background="new 0 0 419.5 595.3" 
    xml:space="preserve">

kaynak

2014-02-14 15:20:53 Thomas

olarak ayarlamanız gerekir. Bu, Yuval Adam'ın yanıtı ile birlikte en iyi şekilde çalışır ... boyutu, SVG dosyasında açıkça belirtilmelidir. google.maps.Size() 'aslında haritadaki gerçek görüntü boyutunu tanımlar. – mch

var marker = new google.maps.Marker({ 
     icon: { 
      size: new google.maps.Size(21, 45), 
      origin: new google.maps.Point(0, 0), 
      anchor: new google.maps.Point(21, 45), 
      url: `data:image/svg+xml;utf-8, 
         <svg width="21" height="45" viewBox="0 0 21 45" xmlns="http://www.w3.org/2000/svg"><title>POINT</title><desc>Created with Sketch.</desc><g transform="translate(-651 -1250) translate(651 1250)" fill="#F76A4C"><circle cx="10.5" cy="10.5" r="10.5"/><path d="M9 19h3v26h-3z"/></g></svg>` 
     } 
    });

Canlı örneğini çalıştı mı çalışmadı.

kaynak

2016-09-27 08:37:09

Harici bir SVG'ye başvururken, simge için size yerine scaledSize kullanmanız gerekir.

function initMap() { 
 
    var springfield = { 
 
    lat: 39.9354165, 
 
    lng: -83.8215624 
 
    }; 
 

 
    var homer = { 
 
    url: 'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg', 
 
    scaledSize: new google.maps.Size(64, 64), 
 
    origin: new google.maps.Point(0, 0), 
 
    anchor: new google.maps.Point(0, 32) 
 
    } 
 

 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 4, 
 
    center: springfield 
 
    }); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: springfield, 
 
    map: map, 
 
    icon: homer, 
 
    draggable: true 
 
    }); 
 
}

#map { 
 
    height: 400px; 
 
    width: 100%; 
 
}

<script async defer src="//maps.googleapis.com/maps/api/js?callback=initMap"></script> 
 
<div id="map"></div>

kaynak

2017-02-28 06:17:28

Google Haritalar'da bir işaretçi için SVG kullanın?

cevap

İlgili konular