動態設置Google地圖SVG路徑圖標的線性漸變

我正在使用Google地圖標記的自定義圖標。我想將樣式應用於標記;特別是線性梯度。下面的xyz代碼在我作爲一個簡單的HTML文檔正常運行時工作，但是當我嘗試在Javascript中運行它時，它不起作用。動態設置Google地圖SVG路徑圖標的線性漸變

var xyz = 'data:image/svg+xml;utf-8, \ 
    <svg width="30" height="60" xmlns="http://www.w3.org/2000/svg"> \ 
     <defs><linearGradient id="mygx"> \ 
      <stop offset="5%" stop-color="yellow"/> \ 
      <stop offset="95%" stop-color="red"/> \ 
     </linearGradient></defs> \ 
     <path fill="url(#mygx)" stroke="black" stroke-width="1.5" d="M0 0 L0 35 L15 60 L30 35 L30 0 L0 0Z"></path> \ 
     </svg>'; 

var myIcon = { 
    url: xyz, 
    fillOpacity: 0.7, 
    scale: 1 
}; 

var marker = new google.maps.Marker({ 
    position: markerLocation, 
    icon: myIcon, 
    map: map, 
    title: 'hello' 
});

任何解決方案歡迎。

來源

2016-02-06 user3320795

通過這個網站判斷，解決方案是encodeURIComponent（），但我還沒有弄明白：http://www.ubilabs.net/de/news/2016-01-11 – user3320795

明白了。 Google地圖不喜歡網址中的＃號。這個作品：

<path fill="url(\u0023mygx)"...

\ u0023是unicode（我認爲）是＃。

來源

2016-02-07 00:38:02 user3320795

動態設置Google地圖SVG路徑圖標的線性漸變

回答

相關問題