javascript - 为什么这个 SVG 没有显示在 Google 地图 (JavaScript) 中？

Question

我正在使用 SVG 文件在地图中显示图标，但一个特定的 SVG 不起作用。我已经测试了该文件，它在浏览器中看起来不错，但是，在代码中执行此操作时，它只是不显示任何内容，也没有失败：

let svgColor = 'red';
let strokeColor = "#00a0d6";

let innerSvg = '<path d="M19.64,16.41a2.07,2.07,0,1,1-2.06,2.06A2.07,2.07,0,0,1,19.64,16.41Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
innerSvg = innerSvg + '<path d="M6.25,16.41a2.07,2.07,0,1,1-2.06,2.06A2.07,2.07,0,0,1,6.25,16.41Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
innerSvg = innerSvg + '<path d="M9,8.17c-1.55,0-4.5,4.49-4.5,4.49S.68,13.93.68,15.79v2.69H3.44a1.23,1.23,0,0,1,0-.2,2.7,2.7,0,0,1,.29-1.07,2.81,2.81,0,0,1,5.32,1.27h7.78a2.81,2.81,0,0,1,5.31-1.27,2.58,2.58,0,0,1,.29,1,2.36,2.36,0,0,1,0,.25h1.61l.39-.53V8.15S10.51,8.18,9,8.17Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
innerSvg = innerSvg + '<path d="M19.64,19.6a1.13,1.13,0,1,0-1.12-1.13A1.13,1.13,0,0,0,19.64,19.6Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
innerSvg = innerSvg + '<path d="M6.25,19.6a1.13,1.13,0,1,0-1.12-1.13A1.12,1.12,0,0,0,6.25,19.6Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
innerSvg = innerSvg + '<path d="M6.26,12.26s2.2-3,2.84-3h3.23v3Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
var svg = '<svg height="40" width="150">' +
    innerSvg +
    '<text x="0" y="7" font-size="7pt" font-weight="bold" text-anchor="left" fill="black">Test</text>' +
    '</svg>';

const icon_ = {
    url: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg),
    anchor: new google.maps.Point(15, 30),
};
return icon_;

之前听说有些SVG复杂文件不能被Google Service识别，会不会是这样？

我准备了一个 jsfiddle 测试：http: //jsfiddle.net/9u2kgxth/

代码片段（来自小提琴）：

var map;
var polyLine;
var polyOptions;
var rotation = 0;

function initialize() {

  var mapOptions = {
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(0, 0)
  };

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

  google.maps.event.addListener(map, 'click', function(event) {

    addPoint(event);
  });
}

function addPoint(event) {

  let svgColor = 'red';
  let strokeColor = "#00a0d6";

  let innerSvg = '<path d="M19.64,16.41a2.07,2.07,0,1,1-2.06,2.06A2.07,2.07,0,0,1,19.64,16.41Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
  innerSvg = innerSvg + '<path d="M6.25,16.41a2.07,2.07,0,1,1-2.06,2.06A2.07,2.07,0,0,1,6.25,16.41Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
  innerSvg = innerSvg + '<path d="M9,8.17c-1.55,0-4.5,4.49-4.5,4.49S.68,13.93.68,15.79v2.69H3.44a1.23,1.23,0,0,1,0-.2,2.7,2.7,0,0,1,.29-1.07,2.81,2.81,0,0,1,5.32,1.27h7.78a2.81,2.81,0,0,1,5.31-1.27,2.58,2.58,0,0,1,.29,1,2.36,2.36,0,0,1,0,.25h1.61l.39-.53V8.15S10.51,8.18,9,8.17Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
  innerSvg = innerSvg + '<path d="M19.64,19.6a1.13,1.13,0,1,0-1.12-1.13A1.13,1.13,0,0,0,19.64,19.6Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
  innerSvg = innerSvg + '<path d="M6.25,19.6a1.13,1.13,0,1,0-1.12-1.13A1.12,1.12,0,0,0,6.25,19.6Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
  innerSvg = innerSvg + '<path d="M6.26,12.26s2.2-3,2.84-3h3.23v3Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
  var svg = '<svg height="40" width="150">' +
    innerSvg +
    '<text x="0" y="7" font-size="7pt" font-weight="bold" text-anchor="left" fill="black">Test</text>' +
    '</svg>';

  const icon_ = {
    url: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg),
    anchor: new google.maps.Point(15, 30),
  };

  var marker = new google.maps.Marker({
    position: event.latLng,
    map: map,
    draggable: false,
    icon: icon
  });

  map.panTo(event.latLng);

  rotation += 10;
}

initialize();

body {
  font-family: Arial;
  font-size: 20px;
  line-height: 40px;
}

#map-canvas {
  height: 400px;
  width: 500px;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
Click on map to add markers...
<div id="map-canvas"></div>

标签： javascriptgoogle-mapssvggoogle-maps-api-3

Answer 1

您<svg>缺少名称空间（正如@RobertLongson 在他的评论中指出的那样）：

var svg = '<svg height="40" width="150">' +
    innerSvg +
    '<text x="0" y="7" font-size="7pt" font-weight="bold" text-anchor="left" fill="black">Test</text>' +
    '</svg>';

应该：

var svg = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="40" width="150">' +
    innerSvg +
    '<text x="0" y="7" font-size="7pt" font-weight="bold" text-anchor="left" fill="black">Test</text>' +
    '</svg>';

概念证明小提琴

代码片段：

var map;
var polyLine;
var polyOptions;
var rotation = 0;

function initialize() {

  var mapOptions = {
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(0, 0)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  addPoint({
    latLng: map.getCenter()
  })

  google.maps.event.addListener(map, 'click', function(event) {

    addPoint(event);
  });
}

function addPoint(event) {

  let svgColor = 'red';
  let strokeColor = "#00a0d6";

  let innerSvg = '<path d="M19.64,16.41a2.07,2.07,0,1,1-2.06,2.06A2.07,2.07,0,0,1,19.64,16.41Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
  innerSvg = innerSvg + '<path d="M6.25,16.41a2.07,2.07,0,1,1-2.06,2.06A2.07,2.07,0,0,1,6.25,16.41Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
  innerSvg = innerSvg + '<path d="M9,8.17c-1.55,0-4.5,4.49-4.5,4.49S.68,13.93.68,15.79v2.69H3.44a1.23,1.23,0,0,1,0-.2,2.7,2.7,0,0,1,.29-1.07,2.81,2.81,0,0,1,5.32,1.27h7.78a2.81,2.81,0,0,1,5.31-1.27,2.58,2.58,0,0,1,.29,1,2.36,2.36,0,0,1,0,.25h1.61l.39-.53V8.15S10.51,8.18,9,8.17Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
  innerSvg = innerSvg + '<path d="M19.64,19.6a1.13,1.13,0,1,0-1.12-1.13A1.13,1.13,0,0,0,19.64,19.6Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
  innerSvg = innerSvg + '<path d="M6.25,19.6a1.13,1.13,0,1,0-1.12-1.13A1.12,1.12,0,0,0,6.25,19.6Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
  innerSvg = innerSvg + '<path d="M6.26,12.26s2.2-3,2.84-3h3.23v3Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
  var svg = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="40" width="150">' +
    innerSvg +
    '<text x="0" y="7" font-size="7pt" font-weight="bold" text-anchor="left" fill="black">Test</text>' +
    '</svg>';

  const icon_ = {
    url: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg),
    anchor: new google.maps.Point(15, 30),
  };
  var marker = new google.maps.Marker({
    position: event.latLng,
    map: map,
    draggable: false,
    icon: icon_
  });

  map.panTo(event.latLng);

  rotation += 10;
}

initialize();

body,
html {
  font-family: Arial;
  font-size: 20px;
  line-height: 40px;
  height: 100%;
  width: 100%;
}

#map-canvas {
  height: 90%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
Click on map to add markers...
<div id="map-canvas"></div>