Sử dụng SVG cho điểm đánh dấu trong Google Maps?

Question

tôi biết có thể thêm lớp phủ svg vào bản đồ google. Tôi tự hỏi nếu bạn có thể sử dụng các tập tin svg như đánh dấu. tôi đã thử thiết lập nó giống như bạn sẽ là một tập tin png hoặc jpg, nhưng không có gì xuất hiện. cho tôi biết nếu tôi nên đăng mã của tôi, nhưng tôi nghĩ rằng tôi có thể tiếp cận nó một cách sai lầm.

cảm ơn.

Answer 1

Trên Google Maps API v3 nó chỉ làm việc tốt cho tôi với mã này (mà cũng xử lý thay đổi kích thước):

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

Answer 2

Tôi đã có một vấn đề với điều này nhưng tôi nhìn vào svg trong một trình soạn thảo mã và nó thiếu chiều rộng và chiều cao được xác định.

Không làm việc

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

đã làm việc

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

Answer 3

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

sống ví dụ về codepen.

Answer 4

Khi tham chiếu một SVG bên ngoài, bạn cần sử dụng scaledSize thay vì size cho biểu tượng. Xem đoạn mã dưới đây ...

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>