相关疑难解决方法(0)

IE 11上不显示Google Maps SVG标记

我的SVG地图标记在IE11上消失了.它在Chrome,Firefox,Safari,IE9和10中都可见,但不是11.我已经上传了我当前代码的JSfiddle.我不知道这是我还是谷歌地图的错误.

<html>
  <head>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCyfFUUVxVyoCicnttJfj-w63wzfbTKV3Y&sensor=false">
    </script>
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script>

function initialize() {

  var sanfrancisco = new google.maps.LatLng(37.78062,-122.397203);

  var mapOptions = {
    zoom: 18,
    zIndex:0,
    center: sanfrancisco,
    mapTypeControl: true,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'usroadatlas']
    },zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    },
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // var image = 'img/1p_marker3.png';
  var image = 'http://firstperson.is/assets/img/contact/map_marker.svg';

var marker …

Run Code Online (Sandbox Code Playgroud)

javascript svg google-maps google-maps-api-3

cre*_*ame

lucky-day

43
推荐指数

3
解决办法

2万
查看次数

IE11元元素打破SVG

我已经将SVG文件数据直接嵌入到我的html中.它在Chrome和Firefox中显示,但在IE11中根本不显示.与SVG的pastebin链接是http://pastebin.com/eZpLXFfD

我尝试添加META TAG但无济于事.起初我以为它可能是IE兼容性视图问题,但切换该功能也不起作用.

<meta http-equiv="X-UA-Compatible" content="IE=8">

有帮助吗？我还能提供哪些信息来帮助回答这个问题

internet-explorer svg internet-explorer-11

Rah*_*ani

2018 01-14

33
推荐指数

2
解决办法

9万
查看次数

IE 11中不会显示自定义SVG标记

我正在尝试使用Google数据层显示一些公交路线,然后添加一些自定义图标标记.适用于Chrome和Firefox,但在IE 11中我只能获得路线.我在一些混淆的代码深处得到一个InvalidStateError.

标记使用带有内联SVG的数据uri,该SVG转换为base 64字符串.我也尝试过不转换为base 64; 这不会产生任何明显的错误,但标记仍然不会显示.

下面粘贴了简化的javascript,你可以在jsfiddle中看到它.

    var map;

    map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 11,
      center: {lat: 38.813605, lng: -89.957399}
    });

    var geoJsonRoutesUrl = 'https://storage.googleapis.com/gtfs-test/MCT-All-Bus-Routes.json';

    var routesLayer = new google.maps.Data(); 
    routesLayer.loadGeoJson(geoJsonRoutesUrl);
    routesLayer.setMap(map);  
    routesLayer.setStyle(function(feature) {
      return ({
        strokeColor: feature.getProperty('color'),
      fillColor: feature.getProperty('color'),
        strokeWeight: 6
      });
    });

    var geoJsonRouteMarkersUrl = 'https://storage.googleapis.com/gtfs-test/MCT-All-Bus-Route-Markers.json';
    var routeMarkersLayer = new google.maps.Data(); 
    routeMarkersLayer.loadGeoJson(geoJsonRouteMarkersUrl);
    routeMarkersLayer.setMap(map);
    routeMarkersLayer.setStyle(function(feature) {
    var markerIcon = CreateRouteMarkersIconDefinition(
        feature.getProperty('route'),
        feature.getProperty('color'),
        feature.getProperty('backColor'));
      return ({icon: markerIcon});
    });


  function CreateRouteMarkersIconDefinition(route, color, backColor) { …

Run Code Online (Sandbox Code Playgroud)

internet-explorer svg google-maps-api-3 google-maps-markers

Bil*_*lyB

2016 02-05

16
推荐指数

2
解决办法

7377
查看次数

Google地图中的自定义标记未显示在Firefox中

我有一张我在rails中使用google maps for rails gem创建的地图.它适用于Chrome和Safari,但它不会在Firefox 29中显示自定义.svg标记.它会显示群集的自定义图像(这是一个png).

我已经碰到了很久以来的一些主题(FF 8和9),它说有一个问题在9或10中与cors有关.然而,它似乎暂时不是一个问题,特别是对于29.

有谁知道这是一个firefox问题还是google maps for rails gem问题？如果它是一个什么是解决方案.

更新: 为png交换svg现在正常工作.然而,这并不能解决潜在的问题.我想使用svg,所以我可以传入颜色变量.

仍然没有运气,chrome和firefox都显示该图像正在开发人员工具中下载.图像目录中的firefox和chrome中可以查看该图像.以下是我的SVG的代码:

    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"       xmlns:xlink="http://www.w3.org/1999/xlink" x="20px" y="20px"
 viewBox="0 0 15 15" enable-background="new 0 0 15 15" xml:space="preserve">
     <circle fill="#45A6DD" cx="7.5" cy="7.5" r="5.6"/>
   </svg>

Run Code Online (Sandbox Code Playgroud)

firefox google-maps google-maps-api-3 gmaps4rails

nil*_*svm

2014 06-06

13
推荐指数

1
解决办法

5585
查看次数

在Google地图中使用SVG作为标记？

我知道可以在谷歌地图上添加svg叠加层.我想知道你是否可以使用svg文件作为标记.我尝试设置它就像你的png或jpg文件,但没有任何显示.让我知道我是否应该发布我的代码,但我想我可能以错误的方式接近它.

谢谢.

svg google-maps google-maps-markers

vee*_*vee

lucky-day

10
推荐指数

3
解决办法

2万
查看次数

在IE11中未显示的Google Maps SVG图像标记图标

我一直在研究的网站上存在一个问题,出于某种原因,在IE 11中没有出现SVG图像标记.

我有两套标记:

默认缩小具有郊区的PNG标记
放大的地址具有特定编号的SVG地址

我对不支持SVG的旧浏览器使用后备(使用modernizr进行测试).我正在使用IE 11的旧Google图表标记来使其工作(测试用户代理字符串以识别它).

我想知道是否有人有任何想法:

原因
是否与IE11 Edge模式搞混了(将文档模式切换为10以使其工作)
或谷歌失败的东西.

该网站是:

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

如果在IE 11中更改用户代理字符串,同时将其保留为边缘文档模式,则可以看到它失败.

debugging svg backwards-compatibility google-maps-markers internet-explorer-11

Har*_*ris

2016 09-26

6
推荐指数

2
解决办法

7323
查看次数

GoogleMaps SVG marker fillColor

我目前正在尝试更改现有标记的颜色.

这是我的javascript代码:

$(".etablissement").mouseenter(function() {
        var currentMarker = oMarkers[$(this).data("type")+"-"+$(this).data("id")];
        var currentIcon = currentMarker.getIcon();
        currentIcon = currentIcon.url;
        var newIcon = {
            url: currentIcon,
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(30, 30),
            scaledSize:new google.maps.Size(40, 40),
            fillColor: '#1077aa',
            fillOpacity: 1,
            strokeColor: '#1077aa'
        };
        currentMarker.setIcon(newIcon);
        if(typeof oMarkers_panier[$(this).data("type")+"-"+$(this).data("id")] == 'undefined' || oMarkers_panier[$(this).data("id")] == null){
            currentMarker.setIcon(newIcon);
        }
        oInfo[$(this).data("type")+"-"+$(this).data("id")].open(oMap, currentMarker);
        currentMarker.setAnimation(google.maps.Animation.BOUNCE);

    });

Run Code Online (Sandbox Code Playgroud)

我用getIcon()得到了标记的当前图标,然后我创建了一个具有相同图像但新颜色的新标记.问题是标记的颜色不会改变.我尝试用基本的.png更改整个图标,它可以工作,所以我不知道可能是什么问题.

这是我的svg代码:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" …

Run Code Online (Sandbox Code Playgroud)

javascript jquery icons svg marker

TEO*_*EOL

2015 02-10

5
推荐指数

1
解决办法

4786
查看次数

使用 Google 地图绘制 svg 圆圈

我正在开发一个网站，想要使用绘制一些圆圈来表示 Google 地图上的兴趣点，但尚未找到在地图上绘制正确的 SVG 圆圈元素的方法。

谷歌文档概述了一个圆形元素，但它们渲染为多边形而不是圆形（看看圆形的边界，你会发现它们有一个奇怪的多边形适合粗略的圆形形状，而不是原始的 svg:circle 元素）。

r是否可以使用半径属性等绘制真正的 SVG 圆？任何指示都会非常有帮助！

javascript svg google-maps

duh*_*ime

lucky-day

3
推荐指数

1
解决办法

3905
查看次数

使用SVG文件动态修改Google地图图标

是)我有的:

我为Google Maps v3 Marker设置了图标

var icon= {
    url: 'path/to/iconfile.svg',
    [...]
};

var marker = new google.maps.Marker({
    icon: icon
    [...]
});

Run Code Online (Sandbox Code Playgroud)

它显示很好.

我想要的是:

有没有办法从标记中获取svg文件,更改一些属性,并将其设置回标记？

我知道你可以做到marker.getIcon()获得实际的Icon对象,但是有类似的东西marker.getIcon().getElementByID("iconID").setAttribute("fill", #000000);(显然不起作用),我可以通过javascript更改SVG文件吗？

javascript svg google-maps google-maps-api-3

The*_*utC

lucky-day

2
推荐指数

1
解决办法

3671
查看次数

如何在 Google 地图上获得平滑标记（SVG 图标）？

我创建了一个标记以放置在 Google 地图上：

var compMarker = new google.maps.Marker({
    position: {lat: 33, lng: -118}
    map: map,
    label: {
        text: "10",
        color: "white",
        fontWeight: "bold"
    },
    icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 15,
        fillColor: "#4E90D9",
        fillOpacity: 1,
        strokeWeight: 1
    }
});

Run Code Online (Sandbox Code Playgroud)

这是结果：

正如你所看到的，这个圆圈看起来很波涛汹涌。有没有办法打造一个高质量的圈子？

javascript google-maps google-maps-api-3

Ang*_*ker

2018 03-28

1
推荐指数

1
解决办法

3160
查看次数

Google Maps API：使用自定义标记图标旋转

我正在使用 Google Map Javascript API，并尝试使用可旋转的自定义图标创建自定义标记，

var marker = new google.maps.Marker({
    position: latlng,
    map: this.map
});

marker.setIcon({
  url:"assets/icon/nav.png",
  //path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
  scale: 1,
  rotation: heading,
  scaledSize: new google.maps.Size(35, 35),
});

Run Code Online (Sandbox Code Playgroud)

旋转属性与 google.maps.SymbolPath.XXXX 一起使用，如代码中注释的行，但不能与我在代码中编写的自定义图标图像一起使用，

所以我问有没有办法让自定义图标图像旋转？或者从图像创建 google.maps.SymbolPath ？

javascript google-maps google-maps-api-3 google-maps-markers

Kar*_*ali

2018 04-02

1
推荐指数

1
解决办法

7402
查看次数