在谷歌地图标记中显示多个字符

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>

[与多个字符谷歌地图标识标签（的