webentwicklung-frage-antwort-db.com.de

Google Maps Marker Label mit mehreren Zeichen

Ich versuche, einer Google Maps-Markierung, für die ein breites Symbol mit einem benutzerdefinierten Pfad definiert ist, eine Beschriftung mit 4 Zeichen (z. B. "A123") hinzuzufügen.

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

Die Marker Label API ist auf ein einzelnes Zeichen beschränkt, daher wird im obigen Beispiel nur ein Marker mit 'A' angezeigt. Ich habe versucht, mit den Entwicklertools chrome) das von gmaps erstellte HTML zu hacken und das längere Label wiederherzustellen. Es wird perfekt angezeigt, ohne dass Änderungen am CSS erforderlich sind. Ich muss also nur einen Weg finden um die anderen Label-Zeichen, die Google Maps entfernt hat, wiederherzustellen.

Ich habe ein Google Maps-Problem gemeldet, um die Aufhebung dieser Einschränkung zu beantragen. Überlegen Sie, ob Sie für das Google-Problem stimmen möchten, indem Sie den obigen Link aufrufen und das Problem mit einem Stern markieren, um Google zur Behebung des Problems zu ermutigen. Vielen Dank!

Gibt es in der Zwischenzeit eine Problemumgehung, mit der ich die einzige Zeichenbeschränkung entfernen kann?

Kann ich eine benutzerdefinierte Erweiterung von google.maps.Marker erstellen, um mein längeres Label anzuzeigen?

41
robd

Sie können MarkerWithLabel mit SVG-Symbolen verwenden.

Update: Die Google Maps Javascript API v3 unterstützt jetzt nativ mehrere Zeichen im MarkerLabel

Machbarkeitsstudie (Sie haben Ihr Icon nicht angegeben, also habe ich mir eins ausgedacht)

Hinweis: Es gibt ein Problem mit Beschriftungen überlappender Markierungen, das von this fix , credit to robd behoben wird es in den Kommentaren.

Code-Snippet:

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>
49
geocodezip

Zunächst einmal Danke an den Autor des Codes!

Ich habe den folgenden Link beim googeln gefunden und es ist sehr einfach und funktioniert am besten. Würde niemals scheitern, wenn SVG nicht mehr unterstützt wird.

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

Es gibt einige Fehler beim Laden von js im Code, aber es funktioniert perfekt mit dem bereitgestellten Link codepen.io.

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>

Sie müssen nur Ihr SVG-HTML uricodieren und das in der Bildvariablen nach "data: image/svg + xml" in der for-Schleife ersetzen.

Für die Uri-Codierung können Sie ri-Encoder-Decoder verwenden

Sie können den vorhandenen SVG-Code zuerst dekodieren, um ein besseres Verständnis der geschriebenen Inhalte zu erhalten.

24
jaspreet21anand

OK, hier ist eine Lösung, die ich mir ausgedacht habe und die ziemlich durcheinander ist.

Ich habe den vollständigen Etikettentext mit dem Attribut fontFamily label in das div eingefügt. Dann benutze ich querySelectorAll, um die resultierenden Stilattribute abzugleichen, um die Referenzen herauszuholen und die Tags neu zu schreiben, sobald die Map geladen wurde:

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

Das scheint ziemlich spröde. Gibt es weniger schreckliche Ansätze?

7
robd

Ab API-Version 3.26.10 können Sie die Markierungsbezeichnung mit mehr als einem Zeichen festlegen. Die Beschränkung wird aufgehoben.

Probieren Sie es aus, es funktioniert!

Wenn Sie ein MarkerLabel-Objekt anstelle einer Zeichenfolge verwenden, können Sie eine Reihe von Eigenschaften für das Erscheinungsbild festlegen. Wenn Sie ein benutzerdefiniertes Symbol verwenden, können Sie die labelOrigin -Eigenschaft so festlegen, dass die Beschriftung neu positioniert wird.

Quelle: https://code.google.com/p/gmaps-api-issues/issues/detail?id=8578#c (Sie können diesbezügliche Probleme auch unter dem oben angegebenen Link melden Faden)

3
Apostolis