在Google Maps API的SVG圖標內添加文字

我正嘗試使用SVG創建自定義Google地圖圖標。我已經得到了很多。然而，所有關於SVG的信息都可以使用這種表示法：<> <>。在Google Maps API的SVG圖標內添加文字

我試圖做一個JS對象內的SVG。任何人都可以通過告訴我這種類型的SVG的名稱來幫助我，這樣我就可以找到某個地方來學習它了嗎？

我的目標是能夠在圓圈內添加文本，但現在我的文本元素不起作用。謝謝！

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" 
}

來源

2016-05-23 user3552105

要添加自定義標記，以谷歌地圖：

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); 
}); 
}

SVG的參考，你可以看到here

這裏有一個Plunker如果你要玩：https://plnkr.co/edit/W5C0NVMrj5larSVNsmFy?p=preview

來源

2016-05-23 21:23:09 Klaujesi

啊，對不起，如果我不清楚。我很感激你的代碼。我已經擁有了所有這些，我只是想弄清楚SVG屬性是用於文本的。我想爲我的SVG添加一個文本元素，以便每個圓圈都被編號。 – user3552105

對於SVG文本參考，您可以在這裏看到：https：//www.w3.org/TR/SVG/text.html。但谷歌標記只接受路徑。您可以將列表添加到您的標記 – Klaujesi

如果你想在您的SVG標記內添加單個字符，這是Google Maps JavaScript API v3 Marker (a "labelled marker"本機支持的。如果你想多個字符

代碼片段：

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>

來源

2016-05-23 21:43:48 geocodezip

在Google Maps API的SVG圖標內添加文字

回答

相關問題