在Google地圖中使用SVG作爲標記嗎？

我知道可以將svg覆蓋圖添加到Google地圖。我想知道你是否可以使用svg文件作爲標記。我試圖設置它就像你會PNG或JPG文件，但沒有出現。讓我知道如果我應該發佈我的代碼，但我想我可能以錯誤的方式接近它。在Google地圖中使用SVG作爲標記嗎？

謝謝。

來源

2010-10-15 vee

沒有人這樣做過？ – vee 2010-10-19 15:14:57

任何人都可以幫助這個... – vee 2010-11-02 15:56:12

在谷歌地圖API V3它工作得很好，我用這個代碼（也可以用來處理調整）：

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

來源

2012-08-31 11:18:11

這樣，gmaps無論如何都會創建一個標籤。您應該使用符號（https://developers.google.com/maps/documentation/javascript/symbols）！ – Khalizar 2014-06-10 14:12:58

如果您在使用IE11時遇到問題，請查看此解決方案以幫助解決所有問題：http://stackoverflow.com/questions/27261346/custom-svg-markers-wont-display-in-ie-11 – 2016-09-21 22:32:03

請注意：如果您的svg文件中有動畫，則需要添加優化選項，將其設置爲false – Scalpweb 2016-12-07 08:48:04

我有這個問題，但我在代碼編輯器看了看SVG和它缺少定義的寬度和高度。

沒有工作

<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

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

來源

2014-02-14 15:20:53 Thomas

這與Yuval Adam的響應一起效果最佳...大小需要在SVG文件中明確指定，並且google.maps.Size（）'實際上定義了地圖上的實際顯示大小。 – mch 2015-12-02 10:18:17

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

活生生的例子。

來源

2016-09-27 08:37:09

當引用外部SVG時，您需要使用scaledSize而不是size作爲圖標。請參見下面代碼片段...

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>

來源

2017-02-28 06:17:28

在Google地圖中使用SVG作爲標記嗎？

回答

相關問題