在谷歌地圖標記中顯示多個字符

Question

我已經實現了谷歌標記，並且我想在標記內顯示一個名稱。我試圖改變標籤：如下面的代碼，但它只顯示第一個字符..可以有人告訴我如何解決這個問題？

這裏是從谷歌的代碼標記

function initialize() { 
    var bangalore = { lat: 12.97, lng: 77.59 }; 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 12, 
    center: bangalore 
    }); 

    // This event listener calls addMarker() when the map is clicked. 
    google.maps.event.addListener(map, 'click', function(event) { 
    addMarker(event.latLng, map); 
    }); 

    // Add a marker at the center of the map. 
    addMarker(bangalore, map); 
} 

// Adds a marker to the map. 
function addMarker(location, map) { 
    // Add the marker at the clicked location, and add the next-available label 
    // from the array of alphabetical characters. 
    var marker = new google.maps.Marker({ 
    position: location, 
    label: "lets showthis", 
    map: map 
    }); 
} 

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

Link to the google maps

Answer 1

的google.maps.Markerlabel是一個單獨的字符。

的documentation明確指出這樣的：

MarkerLabel對象規範

google.maps.MarkerLabel對象規範

這些選項指定的標記標籤的外觀。 標記標籤是將出現在標記內的文本的單個字符。如果您使用自定義標記，可以使用Icon類中的labelOrigin屬性重新定位它。

text |類型：字符串 要在標籤中顯示的文本。 只顯示該字符串的第一個字符。

如果你想要一個以上的字符（至少現在，有一個open feature request to make that number larger），您需要使用第三方庫像MarkerWithLabel。

example fiddle

代碼片斷：

function initialize() { 
 
    var bangalore = { 
 
    lat: 12.97, 
 
    lng: 77.59 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 12, 
 
    center: bangalore 
 
    }); 
 

 
    // This event listener calls addMarker() when the map is clicked. 
 
    google.maps.event.addListener(map, 'click', function(event) { 
 
    addMarker(event.latLng, map); 
 
    }); 
 

 
    // Add a marker at the center of the map. 
 
    addMarker(bangalore, map); 
 
} 
 

 
// Adds a marker to the map. 
 
function addMarker(location, map) { 
 
    // Add the marker at the clicked location, and add the next-available label 
 
    // from the array of alphabetical characters. 
 
    var marker = new MarkerWithLabel({ 
 
    position: location, 
 
    labelContent: "lets showthis", 
 
    map: map, 
 
    labelAnchor: new google.maps.Point(35, 120), 
 
    labelClass: "labels", // the CSS class for the label 
 
    labelInBackground: false, 
 
    icon: pinSymbol('red') 
 
    }); 
 
} 
 

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

 
// creates an SVG marker in the teardrop shape of the "normal" marker 
 
function pinSymbol(color) { 
 
    return { 
 
    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z', 
 
    fillColor: color, 
 
    fillOpacity: 1, 
 
    strokeColor: '#000', 
 
    strokeWeight: 2, 
 
    scale: 4 
 
    }; 
 
}

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
.labels { 
 
    color: black; 
 
    background-color: red; 
 
    font-family: "Lucida Grande", "Arial", sans-serif; 
 
    font-size: 10px; 
 
    text-align: center; 
 
    width: 70px; 
 
    white-space: nowrap; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js"></script> 
 
<div id="map"></div>

[與多個字符谷歌地圖標識標籤（的