谷歌地圖SVG圖像標記圖標IE11

沒有顯示有一個網站，我一直在努力，由於某種原因SVG圖像標記未顯示在IE 11谷歌地圖SVG圖像標記圖標IE11

了一個問題，我有兩套標記：

默認縮小對郊區
放大具有解決特定編號的SVG那些

我使用的爲D舊版本瀏覽器的回退PNG標誌不支持SVG（用modernizr測試它）。我正在使用IE 11的舊版Google圖表標記來使其工作（測試用戶代理字符串以標識它）。

我想知道如果任何人有一個想法：不論是什麼搞砸了IE11 EDGE模式

原因
（切換文檔模式，以10得到它去工作）
或者是與谷歌一起失敗的東西。

該網站是：

http://artstrail.org.au/arts-trail.php

你可以看到，如果你更改用戶代理字符串中的IE 11，而在Edge文檔方式離開它，它失敗。

來源

2013-11-01 Harris

您應該添加驗證的概念一些代碼，你的問題，不只是鏈接到一個網站。 – duncan

能可能可行的解決方案是在這裏：http://stackoverflow.com/questions/27261346/custom-svg-markers-wont-display-in-ie-11 –

看來，谷歌地圖真的不支持使用SVG圖像在此刻標記。這個事實很容易被忽略，因爲事實證明，SVG標記圖像確實可以工作，例如。 Chrome和Opera。

但是，Google Maps API（v3）專門提供Symbol對象來顯示地圖標記中的矢量路徑。我發現在SVG path notation中指定矢量圖像允許它在IE和其他瀏覽器中工作。

例（從谷歌地圖文檔，here）：

var goldStar = { 
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z', 
    fillColor: 'yellow', 
    fillOpacity: 0.8, 
    scale: 1, 
    strokeColor: 'gold', 
    strokeWeight: 14 
}; 

var marker = new google.maps.Marker({ 
    position: map.getCenter(), 
    icon: goldStar, 
    map: map 
});

（感謝this answer太）

來源

2014-10-28 12:24:38

這是非常好的，但我怎麼創建一個包含有不同顏色的多個路徑的SVG文件這個對象表示法（金星）。我如何將這些符號結合起來。 – Prabhas

這真是一個單獨的問題！根據儘管[這個答案]（http://stackoverflow.com/a/26321678/180500）圖標必須是一個單一的路徑，所以它可能是不可能的。 –

這隻適用於簡單的一種顏色形狀圖標。複雜的分層SVG圖標有可能在這裏解決的問題：http://stackoverflow.com/questions/27261346/custom-svg-markers-wont-display-in-ie-11 –

-1

的IE執行從SVG標準偏離在以下方面：一個標記元件的

屬性繼承在參考點，而不是從標記元件的祖先。

參考

MS-SVG: The 'marker' element

來源

2014-02-28 23:34:15

該術語「標記」是錯誤解釋這裏這個答案。 –

-1

添加元模擬IE10/IE9如果SVG在低版本的IE支持。

即），用於IE-10 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10">

來源

2015-10-21 10:44:01 mysticmo

這什麼也沒做，我使用複雜的SVG圖標時（不止一種形狀）。 –

實際上，對於我添加標記optimized: false和圖標scaledSize: new google.maps.Size(25, 25)確實對我來說。所以即使Nick F說的是真的（它不是官方支持的），它也是有效的。

SVG指標開始顯示在IE11。看來，scaledSize增添了風格width和height的<img>元素，無法確定是什麼optimized確實在這種情況下。

例子：

 var marker = new google.maps.Marker({ 
      map: map, 
      position: poi.geometry.location, 
      title: poi.name, 
      zIndex: 99, 
      optimized: false, 
      icon: { 
       url: 'loremipsum.svg', 
       scaledSize: new google.maps.Size(25, 25), 
       size: new google.maps.Size(25, 25), 
       origin: new google.maps.Point(0, 0), 
       anchor: new google.maps.Point(12.5, 12.5) 
      } 
     });

信用：Google Maps SVG marker doesn't display on IE 11

來源

2017-04-26 19:33:55

谷歌地圖SVG圖像標記圖標IE11

回答

相關問題