Hinzufügen von Text innerhalb des SVG-Symbols für Google Maps API

Ich versuche, ein benutzerdefiniertes Google Maps-Symbol mit SVG zu erstellen. Ich bin soweit gekommen. Alle Informationen online über SVG, die ich finden kann, verwendet diese Art der Notation: <> <>.Hinzufügen von Text innerhalb des SVG-Symbols für Google Maps API

Ich versuche, die SVG in einem JS-Objekt zu tun. Kann mir jemand helfen, indem er mir sagt, was diese Art von SVG heißt, damit ich etwas finden kann, um es zu lernen?

Mein Ziel ist es, Text innerhalb des Kreises hinzufügen, aber im Moment funktioniert mein Textelement nicht. Vielen Dank!

var icon = { 
    path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0", 
    fillColor: '#FF0000', 
    fillOpacity: .6, 
    strokeWeight: 1, 
    scale: .5, 
    text: "57" 
}

Quelle

2016-05-23 user3552105

Um benutzerdefinierte Markierungen hinzufügen Google Maps:

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: {lat: -25.363882, lng: 131.044922} 
    }); 

    //define your marker 
    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 
    }; 

//put the marker on the map 
    var marker = new google.maps.Marker({ 
    position: map.getCenter(), 
    icon: goldStar, 
    map: map 
    }); 
var contentString = '<div id="content">'+ 
        'lorem ipsum </div>' 

var infowindow = new google.maps.InfoWindow({ 
    content: contentString 
}); 

marker.addListener('click', function() { 
    infowindow.open(map, marker); 
}); 
}

für SVG Referenz Sie here

hier ist ein Plunker, wenn Sie spielen wollen, um zu sehen: https://plnkr.co/edit/W5C0NVMrj5larSVNsmFy?p=preview

Quelle

2016-05-23 21:23:09 Klaujesi

Ahh sorry, wenn ich nicht klar war. Ich schätze deinen Code. Ich habe das alles schon, ich versuche nur herauszufinden, was das SVG-Attribut für Text ist. Ich möchte meinem SVG ein Textelement hinzufügen, so dass jeder Kreis nummeriert ist. – user3552105

Für SVG-Text-Referenz können Sie hier sehen: https://www.w3.org/TR/SVG/text.html. Aber Google-Marker akzeptieren nur Pfade. Sie können den Markierungen Listener hinzufügen – Klaujesi

Wenn Sie möchten, um ein einzelnes Zeichen innerhalb Ihres SVG-Markers hinzuzufügen, das nativ von der Google Maps Javascript API v3 Marker (a "labelled marker" unterstützt wird.

Verwandte Frage, wenn Sie mehrere Zeichen wollen: Google maps Marker Label with multiple characters

Code-Schnipsel:

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.405, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
    position: map.getCenter(), 
 
    map: map, 
 
    icon: { 
 
     path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0", 
 
     fillColor: '#FF0000', 
 
     fillOpacity: .6, 
 
     strokeWeight: 1, 
 
     scale: .5, 
 
     text: "57" 
 
    }, 
 
    label: "B" 
 
    }) 
 

 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>

Quelle

2016-05-23 21:43:48 geocodezip

Hinzufügen von Text innerhalb des SVG-Symbols für Google Maps API

Antwort

Verwandte Themen