Google maps не отображает элемент SVG с текстовым узлом - PullRequest
Новая
       71

Google maps не отображает элемент SVG с текстовым узлом

0 голосов
/ 11 октября 2018

Это мой SVG-элемент: 

<svg height="20" width="90" style="background-color: #eee; border-radius: 2px;">
  <text x="0" y="15" fill="#0052CC" font-weight="bold">&nbsp;Test</text>
</svg>

Я пытаюсь отобразить его как маркер карты Google, но, похоже, он не работает.

Это мой маркерный объект: 

var marker = new google.maps.Marker({
                position: location,
                map: map,
                icon: {
                  // anchor: new google.maps.Point(16, 16),
url: 'data:image/svg+xml;utf-8,' + 
'<svg height="20" width="90" style="background-color: #eee; border-radius: 2px;">' +
  '<text x="0" y="15" fill="#0052CC" font-weight="bold">&nbsp;Test</text>' + 
'</svg>',
  size: new google.maps.Size(32, 32),
  scaledSize: new google.maps.Size(20, 20)
                }
            });

1 Ответ

0 голосов
/ 12 октября 2018

Пример здесь работает.Похоже, вам не хватает пространства имен xml.Это работает для меня: 

var marker = new google.maps.Marker({
  position: map.getCenter(),
  map: map,
  icon: {
    url: 'data:image/svg+xml;utf-8,' +
      '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="20" width="90" style="background-color: #eee; border-radius: 2px;"><text x="0" y="15" fill="#0052CC" font-weight="bold">Test</text></svg>',
    size: new google.maps.Size(32, 32),
  }
});

подтверждение концепции скрипта

screenshot of resulting map

фрагмент кода: 

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
<script>
  function init() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 17,
      center: new google.maps.LatLng(54.833890, 9.547270)
    });
    var marker = new google.maps.Marker({
      position: map.getCenter(),
      map: map,
      icon: {
        url: 'data:image/svg+xml;utf-8,' +
          '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="20" width="90" style="background-color: #eee; border-radius: 2px;"><text x="0" y="15" fill="#0052CC" font-weight="bold">Test</text></svg>',
        size: new google.maps.Size(32, 32),
      }
    });
  }
  google.maps.event.addDomListener(window, 'load', init);
</script>
...