Können zwei Marker für eine Position erstellt werden?

Question

Ich arbeite an einer Google Maps-Implementierung, die im Grunde eine Karte eines Ferienparks ist. Hier muss ich Häuser zeigen, die sich dort befinden. Ich habe die Google Maps mit den Häusern als Marker erstellen, aber der Kunde will es so:

es also im Grunde ein Kreis auf sie sein muss, die die Zahl druckt/id wie folgt angegeben:

var locations = [ 
    [{id: 1, lat: 51.52382330377623, lng: 5.137980404243535, content: 'Kids Jungalow A'}], 
    [{id: 2, lat: 51.52365641932812, lng: 5.138034048423833, content: 'Kids Jungalow B'}], 
    [{id: 3, lat: 51.523512898213674, lng: 5.138157430038518, content: 'Kids Jungalow C'}], 
    [{id: 4, lat: 51.523356025780366, lng: 5.138221803054876, content: 'Kids Jungalow D'}], 
    [{id: 5, lat: 51.52321917917386, lng: 5.13836664234168, content: 'Kids Jungalow E'}], 
    [{id: 6, lat: 51.52306230572866, lng: 5.138559761390752, content: 'Kids Jungalow F'}], 
] 

Ist es möglich, ein div an die Marker anzuhängen? Das mache ich einen HTML-Marker

Answer 1

Sie können einen Marker mit benutzerdefinierten HTML in ihnen erstellen. Schauen Sie sich auf Rich Marker Bibliothek oder Marker With Label Bibliothek (Sie können Stil wie Blase aussehen mit Zahl)

Beide Bibliotheken Hebel google.maps.OverlayView, die der Prototyp der Klasse ist, dass Sie wiederverwenden können eigene Markierungen zu erstellen. Es gibt keine Begrenzungen auf, was in der Markierung ist, Sie können Ihren eigenen HTML innen, Bilder, Svg anzeigen ... Schauen Sie sich einfach den Beispielcode innerhalb der USGSOverlay.prototype.onAdd Funktion von der oben genannten Seite an. Sie können eine beliebige Struktur, die Sie innen wollen erstellen, so können Sie zum Beispiel so etwas wie dieses:

MyOverlay.prototype.onAdd = function() { 

    var div = document.createElement('div'); //marker container div 
    div.style.borderStyle = 'none'; 
    div.style.borderWidth = '0px'; 
    div.style.position = 'absolute'; 

    var img = document.createElement('img'); //house image icon 
    img.src = "myimages/house.png"; 
    img.style.width = '100%'; 
    img.style.height = '100%'; 
    img.style.position = 'absolute'; 
    div.appendChild(img); 

    var circle = document.createElement('div'); //house image icon 
    circle.style.position = 'absolute'; 
    //..other circle styles/css classes to style the div in the shape of circle 
    circle.innerHTML = this.number_inside_circle; //here you can set number inside the circle 
    div.appendChild(circle); 

    this.div_ = div; 

    var panes = this.getPanes(); 
    panes.overlayLayer.appendChild(div); 
}; 

Answer 2

Werfen Sie einen Blick auf Marker Labels: https://developers.google.com/maps/documentation/javascript/markers#marker_labels zB: https://developers.google.com/maps/documentation/javascript/examples/marker-labels

jedoch der Marker akzeptiert nur ein Einzelzeichen-Label standardmäßig. Die Marker Clusterer kann dies tun, oder es gibt einige andere Lösungen in einer support ticket.