Skorzystaj z SVG dla znacznika w Google Maps?

Wiem, że istnieje możliwość dodania nakładek svg do map Google. Zastanawiam się, czy możesz używać plików svg jako znaczników. próbowałem ustawić go tak, jak zrobiłbyś plik png lub jpg, ale nic się nie pokazuje. daj mi znać, jeśli powinienem opublikować mój kod, ale myślę, że prawdopodobnie podchodzę do niego w niewłaściwy sposób.Skorzystaj z SVG dla znacznika w Google Maps?

dzięki.

Źródło

2010-10-15 vee

nikt nie zrobił tego wcześniej? – vee

może ktoś pomóc w tym ... – vee

w Google Maps API v3 to działa dobrze dla mnie z tego kodu (który również uchwyty zmiany rozmiaru):

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

Źródło

2012-08-31 11:18:11

w ten sposób, gmaps utworzy w każdym razie tag . zamiast tego należy użyć symbolu (https://developers.google.com/maps/documentation/javascript/symbols)! – Khalizar

Jeśli masz problemy z zaimplementowaniem go na IE11, skorzystaj z tego rozwiązania, aby rozwiązać wszelkie problemy: http://stackoverflow.com/questions/27261346/custom-svg-markers-wont-display-in-ie-11 –

Tylko uwaga: jeśli masz animację w pliku SVG, musisz dodać opcję optymalizacji, ustawioną na false – Scalpweb

miałem z tym problemu, ale spojrzał na SVG w edytorze kodu i brakowało zdefiniowanej szerokości i wysokości.

nie działa

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

wyszło

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

Źródło

2014-02-14 15:20:53 Thomas

To razem z odpowiedzią Yuvala Adama działa najlepiej ... Rozmiar musi być określony jawnie w pliku SVG, i 'google.maps.Size()' faktycznie określa rzeczywisty rozmiar wyświetlania na mapie. – 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>` 
     } 
    });

żywo przykład na codepen.

Źródło

2016-09-27 08:37:09

Podczas tworzenia odniesienia do zewnętrznej SVG należy użyć ikony scaledSize zamiast size. Zobacz fragment kodu poniżej ...

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>

Źródło

2017-02-28 06:17:28

Skorzystaj z SVG dla znacznika w Google Maps?

Odpowiedz

Powiązane problemy