Marqueur de Google maps avec plusieurs caractères

j'essaie d'ajouter une étiquette de 4 caractères (par exemple 'A123') à un marqueur Google Maps qui a une icône large définie avec un chemin personnalisé.

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

marqueur étiquette API est limité à un seul caractère, donc montre juste un marqueur avec 'A' dans l'exemple ci-dessus. J'ai essayé d'utiliser les outils de développement de chrome pour hacker le html qui est créé par gmaps et rétablir l'étiquette plus longue. Il s'affiche parfaitement sans aucune modification à la css nécessaire, donc j'ai juste besoin de trouver un façon de rétablir les autres marques que Google maps a dépouillé.

j'ai soulevé un Google Maps Issue demander que cette restriction soit levée. S'il vous plaît envisager de voter pour la question Google en visitant le lien ci - dessus et en vedette la question pour encourager Google à corriger-merci!

Mais en attendant, est-il une solution que je peux utiliser pour supprimer l'un char de restriction?

y a-t-il un moyen de créer une extension personnalisée de Google.cartographie.Marqueur pour montrer mon étiquette plus longue?

37
demandé sur robd 2015-09-09 00:04:57

5 réponses

vous pouvez utiliser MarkerWithLabel avec des icônes SVG.

mise à Jour: L'API Javascript V3 de Google Maps supporte désormais nativement plusieurs caractères dans le MarkerLabel

validation de principe fiddle (vous ne fournissez pas votre icône, donc j'ai fait un up)

Note: il y a un problème avec les étiquettes sur les marqueurs qui se chevauchent qui est traité par fix crédit robd qui l'a introduit dans les commentaires.

extrait de code:

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>
43
répondu geocodezip 2018-04-11 06:33:35

tout d'abord, merci à l'auteur du code!

j'ai trouvé le lien ci-dessous pendant googler et il est très simple et fonctionne le mieux. N'échouerait jamais à moins que SVG soit déprécié.

https://codepen.io/moistpaint/pen/ywFDe/

il y a une erreur de chargement js dans le code ici mais ça fonctionne parfaitement sur le codepen.io lien fourni.

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>

vous avez juste besoin d'uri-encoder votre SVG html et remplacer celui de la variable image après "data: image / svg+xml" dans la boucle for.

pour le codage uri vous pouvez utiliser uri-codeur-décodeur

vous pouvez décoder le code svg existant en premier pour avoir une meilleure compréhension de ce qui est écrit.

22
répondu jaspreet21anand 2018-04-11 06:34:21

OK, voici une solution que j'ai trouvé et qui est assez foireuse.

j'ai mis le texte complet de l'étiquette dans le div en utilisant l'attribut de l'étiquette fontFamily. Puis j'utilise querySelectorAll pour faire correspondre les attributs de style résultants pour extraire les références et réécrire les tags une fois que la carte a chargé:

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

Cela semble assez fragile. Y a-t-il des approches moins horribles?

7
répondu robd 2018-06-23 07:13:18

à partir de la version 3.26.10 de L'API, vous pouvez définir le marqueur avec plus d'un caractère. La restriction est levée.

essayez, ça marche!

de plus, en utilisant un objet MarkerLabel au lieu d'une simple chaîne de caractères, vous pouvez définir un certain nombre de propriétés pour l'apparence, et si vous utilisez une icône personnalisée, vous pouvez définir la propriété labelOrigin pour repositionner l'étiquette.

Source: https://code.google.com/p/gmaps-api-issues/issues/detail?id=8578#c30 (également, vous pouvez signaler tout problème concernant cette au-dessus du fil relié)

3
répondu Apostolis 2016-11-29 14:11:49

une solution beaucoup plus simple à ce problème qui permet des lettres, des nombres et des mots car l'étiquette est le code suivant. Plus précisément, la ligne de code commençant par "icône". N'importe quelle chaîne ou variable pourrait être substituée à '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'
});

- - - le tableau des emplacements contient le lat et le long et k est le numéro de la ligne pour l'adresse que j'étais en train de cartographier. En d'autres termes, si j'avais 100 adresses pour cartographier mes étiquettes de marqueur serait de 1 à 100.

-1
répondu daniel Gabrielli 2015-12-29 13:23:17