Rótulo de marcadores do Google maps com vários caracteres
estou a tentar adicionar um rótulo de 4 caracteres (eg 'A123') a um marcador do Google Maps que tem um ícone largo definido com um caminho personalizado.
var marker = new google.maps.Marker({
position: latLon,
label: { text: 'A123' },
map: map,
icon: {
path: 'custom icon path',
fillColor: '#000000',
labelOrigin: new google.maps.Point(26.5, 20),
anchor: new google.maps.Point(26.5, 43)
scale: 1,
}
});
levantei uma questão do Google Mapspara solicitar que esta restrição fosse levantada. Por favor, considere votar a favor da questão do Google visitando o link acima e estrelando a questão para incentivar o Google a corrigi - lo-obrigado!
Mas, entretanto, há alguma solução que possa usar para remover a restrição de um char?Existe uma maneira de eu criar uma extensão personalizada do google.mapa.Marcador para mostrar o meu mais longo etiqueta?
5 answers
Pode usar o Markerthornabel com ícones SVG.
Actualização: a API de Javascript do Google Maps v3 suporta agora nativamente vários caracteres no MarkerLabel
Prova do conceito de violino (você não forneceu o seu ícone, então eu inventei um)
Nota: Há um problema com etiquetas em Marcadores sobrepostos que é abordado por Este arranjo, crédito a robd que o trouxe para cima nos comentários.
Código excerto:
function initMap() {
var latLng = new google.maps.LatLng(49.47805, -123.84716);
var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 12,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new MarkerWithLabel({
position: homeLatLng,
map: map,
draggable: true,
raiseOnDrag: true,
labelContent: "ABCD",
labelAnchor: new google.maps.Point(15, 65),
labelClass: "labels", // the CSS class for the label
labelInBackground: false,
icon: pinSymbol('red')
});
var iw = new google.maps.InfoWindow({
content: "Home For Sale"
});
google.maps.event.addListener(marker, "click", function(e) {
iw.open(map, this);
});
}
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: 2
};
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map_canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
.labels {
color: white;
background-color: red;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
text-align: center;
width: 30px;
white-space: nowrap;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map_canvas" style="height: 400px; width: 100%;"></div>
Https://codepen.io/moistpaint/pen/ywFDe/
Há aqui algum erro de carregamento do js no código, mas está a funcionar perfeitamente no código. codepen.io link fornecido.var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(-37.808846, 144.963435)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var pinz = [
{
'location':{
'lat' : -37.807817,
'lon' : 144.958377
},
'lable' : 2
},
{
'location':{
'lat' : -37.807885,
'lon' : 144.965415
},
'lable' : 42
},
{
'location':{
'lat' : -37.811377,
'lon' : 144.956596
},
'lable' : 87
},
{
'location':{
'lat' : -37.811293,
'lon' : 144.962883
},
'lable' : 145
},
{
'location':{
'lat' : -37.808089,
'lon' : 144.962089
},
'lable' : 999
},
];
for(var i = 0; i <= pinz.length; i++){
var image = 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2238%22%20height%3D%2238%22%20viewBox%3D%220%200%2038%2038%22%3E%3Cpath%20fill%3D%22%23808080%22%20stroke%3D%22%23ccc%22%20stroke-width%3D%22.5%22%20d%3D%22M34.305%2016.234c0%208.83-15.148%2019.158-15.148%2019.158S3.507%2025.065%203.507%2016.1c0-8.505%206.894-14.304%2015.4-14.304%208.504%200%2015.398%205.933%2015.398%2014.438z%22%2F%3E%3Ctext%20transform%3D%22translate%2819%2018.5%29%22%20fill%3D%22%23fff%22%20style%3D%22font-family%3A%20Arial%2C%20sans-serif%3Bfont-weight%3Abold%3Btext-align%3Acenter%3B%22%20font-size%3D%2212%22%20text-anchor%3D%22middle%22%3E' + pinz[i].lable + '%3C%2Ftext%3E%3C%2Fsvg%3E';
var myLatLng = new google.maps.LatLng(pinz[i].location.lat, pinz[i].location.lon);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<div id="map-canvas"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDtc3qowwB96ObzSu2vvjEoM2pVhZRQNSA&signed_in=true&callback=initMap&libraries=drawing,places"></script>
Você só precisa de URI-codificar o seu HTML SVG e substituir o um na variável de imagem após "data: image / svg+xml" no for loop.
Para a codificação uri pode usar O codificador-descodificador uri
Você pode descodificar o código svg existente primeiro para obter uma melhor compreensão do que está escrito.
Coloquei a legenda completa no div usando o atributo fontFamily label. Depois, utilizo o querySelectorAll para corresponder aos atributos de estilo resultantes para extrair os refs e reescrever as marcas logo que o mapa tenha carregado:
var label = "A123";
var marker = new google.maps.Marker({
position: latLon,
label: {
text: label,
// Add in the custom label here
fontFamily: 'Roboto, Arial, sans-serif, custom-label-' + label
},
map: map,
icon: {
path: 'custom icon path',
fillColor: '#000000',
labelOrigin: new google.maps.Point(26.5, 20),
anchor: new google.maps.Point(26.5, 43),
scale: 1
}
});
google.maps.event.addListener(map, 'idle', function() {
var labels = document.querySelectorAll("[style*='custom-label']")
for (var i = 0; i < labels.length; i++) {
// Retrieve the custom labels and rewrite the tag content
var matches = labels[i].getAttribute('style').match(/custom-label-(A\d\d\d)/);
labels[i].innerHTML = matches[1];
}
});
Isto parece bastante frágil. Há alguma abordagem menos horrível?
A partir da versão 3.26.10 da API, você pode definir o rótulo marcador com mais de um caracteres. A restrição foi levantada.
Tenta, funciona!Além disso, usando um objecto MarkerLabel em vez de apenas um texto, poderá definir um número de propriedades para a aparência e, se usar um ícone personalizado, poderá definir a propriedade labelOrigin para reposicionar a legenda.
Fonte: https://code.google.com/p/gmaps-api-issues/issues/detail?id=8578#c30 (também, você pode relatar qualquer questões a este respeito no tópico relacionado acima)
Uma solução muito mais simples para este problema que permite letras, números e palavras como o rótulo é o seguinte código. Mais especificamente, a linha de código começando com "icon:". Qualquer cadeia de caracteres ou variável pode ser substituída por "k".
for (i = 0; i < locations.length; i++)
{
k = i + 1;
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + k + '|FF0000|000000'
});
- - - a lista de locais contém o lat e o longo e k é o número de linha para o endereço que estava a mapear. Por outras palavras, se eu tivesse 100 endereços para mapear as minhas marcas seriam de 1 a 100.