Come posso creare indicatori di mappe numerate in Google Maps V3?

Sto lavorando su una mappa che contiene più marcatori.

Questi indicatori usano un’icona personalizzata, ma vorrei aggiungere anche dei numeri. Ho visto come questo è stato realizzato utilizzando versioni precedenti dell’API. Come posso farlo in V3?

* Nota: l’attributo “titolo” crea un suggerimento quando passi il puntatore del mouse sul marcatore, ma voglio qualcosa che verrà sovrapposto all’immagine personalizzata anche quando non ci si appollaia sopra.

Ecco la documentazione per la class dei marcatori e nessuno di questi attributi sembra essere di aiuto: http://code.google.com/apis/maps/documentation/v3/reference.html#MarkerOptions

Sfortunatamente non è molto facile. È ansible creare il proprio marcatore personalizzato basato sulla class OverlayView ( un esempio ) e inserire il proprio codice HTML, incluso un contatore. Questo ti lascerà un pennarello molto semplice, che non puoi trascinare o aggiungere facilmente ombre, ma è molto personalizzabile.

In alternativa, puoi aggiungere un’etichetta al marcatore di default . Questo sarà meno personalizzabile ma dovrebbe funzionare. Mantiene anche tutte le cose utili che fa il marcatore standard.

Puoi leggere ulteriori informazioni sugli overlay nell’articolo di Google Fun with MVC Objects .

Modifica: se non desideri creare una class JavaScript, puoi utilizzare l’API grafico di Google . Per esempio:

Marcatore numerato:

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000 

Indicatore di testo:

 http://chart.apis.google.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|foo 

Questo è il percorso facile e veloce, ma è meno personalizzabile e richiede una nuova immagine per essere scaricata dal client per ciascun marker.

Ecco come lo faccio in V3:

Inizio caricando l’API di google maps e all’interno del metodo di callback initialize() carico MarkerWithLabel.js che ho trovato qui :

 function initialize() { $.getScript("/js/site/marker/MarkerWithLabel.js#{applicationBean.version}", function(){ var mapOptions = { zoom: 8, center: new google.maps.LatLng(currentLat, currentLng), mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl: false, mapTypeControl: false }; var map = new google.maps.Map(document.getElementById('mapholder'), mapOptions); var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < mapData.length; i++) { createMarker(i+1, map, mapData[i]);  extendBounds(bounds, mapData[i]); } map.fitBounds(bounds); var maximumZoomLevel = 16; var minimumZoomLevel = 11; var ourZoom = defaultZoomLevel; // default zoom level var blistener = google.maps.event.addListener((map), 'bounds_changed', function(event) { if (this.getZoom(map.getBounds) > 16) { this.setZoom(maximumZoomLevel); } google.maps.event.removeListener(blistener); }); }); } function loadScript() { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&sensor=false&callback=initialize"; document.body.appendChild(script); } window.onload = loadScript;  

Quindi creo i marcatori con createMarker() :

 function createMarker(number, currentMap, currentMapData) { var marker = new MarkerWithLabel({ position: new google.maps.LatLng(currentMapData[0], currentMapData[1]), map: currentMap, icon: '/img/sticker/empty.png', shadow: '/img/sticker/bubble_shadow.png', transparent: '/img/sticker/bubble_transparent.png', draggable: false, raiseOnDrag: false, labelContent: ""+number, labelAnchor: new google.maps.Point(3, 30), labelClass: "mapIconLabel", // the CSS class for the label labelInBackground: false }); } 

Da quando ho aggiunto la class mapIconLabel al marker, posso aggiungere alcune regole css nel mio css:

 .mapIconLabel { font-size: 15px; font-weight: bold; color: #FFFFFF; font-family: 'DINNextRoundedLTProMediumRegular'; } 

E questo è il risultato:

MarkerWithIconAndLabel

Non ho abbastanza reputazione per commentare le risposte, ma ho voluto notare che l’API di Google Chart è stata deprecata.

Dalla homepage dell’API :

La parte Infografica di Google Chart Tools è stata ufficialmente ritirata a partire dal 20 aprile 2012.

Si consiglia di scaricare un set di icone numerate dalle fonti fornite in questo sito:

  • Google Marker Icons

Quindi dovresti essere in grado di fare quanto segue:

     Google Maps Demo     

Screenshot dell'esempio precedente:

Icone marcatore numerato di Google

Nota che puoi facilmente aggiungere un'ombra dietro i marcatori. Potresti voler controllare l'esempio nell'API di Google Maps. Riferimenti: Marker complessi per maggiori informazioni a riguardo.

Questo è stato ora aggiunto alla documentazione di Mapping e non richiede codice di terze parti.

È ansible combinare questi due campioni:

https://developers.google.com/maps/documentation/javascript/examples/marker-labels

https://developers.google.com/maps/documentation/javascript/examples/icon-simple

Per ottenere codice come questo:

 var labelIndex = 0; var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789'; function initialize() { var bangalore = { lat: 12.97, lng: 77.59 }; var map = new google.maps.Map(document.getElementById('map-canvas'), { 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: labels[labelIndex], map: map, icon: 'image.png' }); } google.maps.event.addDomListener(window, 'load', initialize); 

Nota che se hai più di 35 marcatori, questo metodo non funzionerà poiché l’etichetta mostra solo il primo carattere (usando AZ e 0-9 fa 35). Si prega di votare per questo problema di Google Maps per richiedere che questa restrizione venga revocata.

L’ho fatto usando una soluzione simile a @ZuzEL.

Invece di utilizzare la soluzione predefinita ( http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000 ), puoi creare queste immagini come desideri, utilizzando JavaScript, senza alcun codice lato server .

Google google.maps.Marker accetta Base64 per la sua proprietà icona. Con questo possiamo creare un Base64 valido da un SVG.

inserisci la descrizione dell'immagine qui

Puoi vedere il codice per produrre lo stesso di questa immagine in questo Plunker: http://plnkr.co/edit/jep5mVN3DsVRgtlz1GGQ?p=preview

 var markers = [ [1002, -14.2350040, -51.9252800], [2000, -34.028249, 151.157507], [123, 39.0119020, -98.4842460], [50, 48.8566140, 2.3522220], [22, 38.7755940, -9.1353670], [12, 12.0733335, 52.8234367], ]; function initializeMaps() { var myLatLng = { lat: -25.363, lng: 131.044 }; var map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 4, center: myLatLng }); var bounds = new google.maps.LatLngBounds(); markers.forEach(function(point) { generateIcon(point[0], function(src) { var pos = new google.maps.LatLng(point[1], point[2]); bounds.extend(pos); new google.maps.Marker({ position: pos, map: map, icon: src }); }); }); map.fitBounds(bounds); } var generateIconCache = {}; function generateIcon(number, callback) { if (generateIconCache[number] !== undefined) { callback(generateIconCache[number]); } var fontSize = 16, imageWidth = imageHeight = 35; if (number >= 1000) { fontSize = 10; imageWidth = imageHeight = 55; } else if (number < 1000 && number > 100) { fontSize = 14; imageWidth = imageHeight = 45; } var svg = d3.select(document.createElement('div')).append('svg') .attr('viewBox', '0 0 54.4 54.4') .append('g') var circles = svg.append('circle') .attr('cx', '27.2') .attr('cy', '27.2') .attr('r', '21.2') .style('fill', '#2063C6'); var path = svg.append('path') .attr('d', 'M27.2,0C12.2,0,0,12.2,0,27.2s12.2,27.2,27.2,27.2s27.2-12.2,27.2-27.2S42.2,0,27.2,0z M6,27.2 C6,15.5,15.5,6,27.2,6s21.2,9.5,21.2,21.2c0,11.7-9.5,21.2-21.2,21.2S6,38.9,6,27.2z') .attr('fill', '#FFFFFF'); var text = svg.append('text') .attr('dx', 27) .attr('dy', 32) .attr('text-anchor', 'middle') .attr('style', 'font-size:' + fontSize + 'px; fill: #FFFFFF; font-family: Arial, Verdana; font-weight: bold') .text(number); var svgNode = svg.node().parentNode.cloneNode(true), image = new Image(); d3.select(svgNode).select('clippath').remove(); var xmlSource = (new XMLSerializer()).serializeToString(svgNode); image.onload = (function(imageWidth, imageHeight) { var canvas = document.createElement('canvas'), context = canvas.getContext('2d'), dataURL; d3.select(canvas) .attr('width', imageWidth) .attr('height', imageHeight); context.drawImage(image, 0, 0, imageWidth, imageHeight); dataURL = canvas.toDataURL(); generateIconCache[number] = dataURL; callback(dataURL); }).bind(this, imageWidth, imageHeight); image.src = 'data:image/svg+xml;base64,' + btoa(encodeURIComponent(xmlSource).replace(/%([0-9A-F]{2})/g, function(match, p1) { return String.fromCharCode('0x' + p1); })); } initializeMaps(); 
 #map_canvas { width: 100%; height: 300px; } 
         

Cosa ne pensi di questo? (anno 2015)

1) Ottieni un’immagine marcatore personalizzata.

 var imageObj = new Image(); imageObj.src = "/markers/blank_pin.png"; 

2) Crea una canvas nella RAM e disegna questa immagine su di essa

 imageObj.onload = function(){ var canvas = document.createElement('canvas'); var context = canvas.getContext("2d"); context.drawImage(imageObj, 0, 0); } 

3) Scrivi qualcosa sopra di esso

 context.font = "40px Arial"; context.fillText("54", 17, 55); 

4) Ottieni dati grezzi dalla canvas e fornili all’API di Google anziché all’URL

 var image = { url: canvas.toDataURL(), }; new google.maps.Marker({ position: position, map: map, icon: image }); 

inserisci la descrizione dell'immagine qui

Codice completo:

 function addComplexMarker(map, position, label, callback){ var canvas = document.createElement('canvas'); var context = canvas.getContext("2d"); var imageObj = new Image(); imageObj.src = "/markers/blank_pin.png"; imageObj.onload = function(){ context.drawImage(imageObj, 0, 0); //Adjustable parameters context.font = "40px Arial"; context.fillText(label, 17, 55); //End var image = { url: canvas.toDataURL(), size: new google.maps.Size(80, 104), origin: new google.maps.Point(0,0), anchor: new google.maps.Point(40, 104) }; // the clickable region of the icon. var shape = { coords: [1, 1, 1, 104, 80, 104, 80 , 1], type: 'poly' }; var marker = new google.maps.Marker({ position: position, map: map, labelAnchor: new google.maps.Point(3, 30), icon: image, shape: shape, zIndex: 9999 }); callback && callback(marker) }; }); 

Google Maps versione 3 ha il supporto integrato per le etichette dei marcatori. Non è più necessario generare le tue immagini o implementare classi di terze parti. Etichette Marker

È abbastanza fattibile generare icone etichettate lato server, se si dispone di alcune competenze di programmazione. Avrai bisogno della libreria GD sul server, oltre a PHP. Ho lavorato bene per me ormai da diversi anni, ma devo ammettere che è difficile ottenere le immagini delle icone in sincronia.

Lo faccio tramite AJAX inviando i pochi parametri per definire l’icona vuota e il testo e il colore, nonché bgcolor da applicare. Ecco il mio PHP:

 header("Content-type: image/png"); //$img_url = "./icons/gen_icon5.php?blank=7&text=BB"; function do_icon ($icon, $text, $color) { $im = imagecreatefrompng($icon); imageAlphaBlending($im, true); imageSaveAlpha($im, true); $len = strlen($text); $p1 = ($len <= 2)? 1:2 ; $p2 = ($len <= 2)? 3:2 ; $px = (imagesx($im) - 7 * $len) / 2 + $p1; $font = 'arial.ttf'; $contrast = ($color)? imagecolorallocate($im, 255, 255, 255): imagecolorallocate($im, 0, 0, 0); // white on dark? imagestring($im, $p2, $px, 3, $text, $contrast); // imagestring ( $image, $font, $x, $y, $string, $color) imagepng($im); imagedestroy($im); } $icons = array("black.png", "blue.png", "green.png", "red.png", "white.png", "yellow.png", "gray.png", "lt_blue.png", "orange.png"); // 1/9/09 $light = array( TRUE, TRUE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE); // white text? $the_icon = $icons[$_GET['blank']]; // 0 thru 8 (note: total 9) $the_text = substr($_GET['text'], 0, 3); // enforce 2-char limit do_icon ($the_icon, $the_text,$light[$_GET['blank']] ); 

È invocato sul lato client tramite qualcosa di simile al seguente: var image_file = "./our_icons/gen_icon.php?blank=" + escape (icone [colore]) + "& text =" + iconStr;

I miei due centesimi mostrano come utilizzare l’ API Google Charts per risolvere questo problema.

Basato sulla risposta @ dave1010 ma con collegamenti https aggiornati.

Marcatore numerato:

 https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000 

Indicatore di testo:

 https://chart.googleapis.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|Marker 

Puoi utilizzare l’opzione Contrassegna con etichetta in google-maps-utility-library-v3. inserisci la descrizione dell'immagine qui

Fai riferimento https://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries

Ho scoperto il modo migliore per farlo. Usa Snap.svg per creare lo svg e quindi usa la funzione toDataURL () che crea i dati grafici da includere come icona. Nota che uso la class SlidingMarker per il marker che mi dà un buon movimento del marker. Con Snap.svg puoi creare qualsiasi tipo di grafica e la tua mappa sarà fantastica.

 var s = Snap(100, 100); s.text(50, 50, store.name); // Use more graphics here. var marker = new SlidingMarker({ position: {lat: store.lat, lng: store.lng}, map: $scope.map, label: store.name, // you do not need this title: store.name, // nor this duration: 2000, icon: s.toDataURL() }); 

SOLUZIONE PIÙ SEMPLICE – UTILIZZARE SVG

Funziona in: IE9 , IE10 , FF, Chrome, Safari

(se stai usando altri browser per favore “Esegui snippet di codice” e inserisci un commento)

Nessuna dipendenza esterna oltre all’API di Google Maps!

inserisci la descrizione dell'immagine qui

Questo è abbastanza facile se hai la tua icona in formato .svg . In tal caso, aggiungi semplicemente l’elemento di testo appropriato e modifica il suo contenuto in base alle tue esigenze con JS.

Aggiungi qualcosa di simile al tuo codice .svg (questa è una “sezione” di testo che verrà successivamente modificata con JS):

 1 

Esempio: (parzialmente copiato da @ EstevãoLucas)

Importante: utilizza le proprietà del tag corrette. Nota text-anchor="middle" x="50%" y="28" che centra i numeri più lunghi (ulteriori informazioni: Come posizionare e centrare il testo in un rettangolo SVG )

Usa encodeURIComponent() (questo probabilmente garantisce la compatibilità con IE9 e 10)

 // Most important part (use output as Google Maps icon) function getMarkerIcon(number) { // inline your SVG image with number variable var svg = '           ' + number + '    '; // use SVG without base64 see: https://css-tricks.com/probably-dont-base64-svg/ return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg); } // Standard Maps API code var markers = [ [1, -14.2350040, -51.9252800], [2, -34.028249, 151.157507], [3, 39.0119020, -98.4842460], [5, 48.8566140, 2.3522220], [9, 38.7755940, -9.1353670], [12, 12.0733335, 52.8234367], ]; function initializeMaps() { var myLatLng = { lat: -25.363, lng: 131.044 }; var map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 4, center: myLatLng }); var bounds = new google.maps.LatLngBounds(); markers.forEach(function(point) { var pos = new google.maps.LatLng(point[1], point[2]); new google.maps.Marker({ position: pos, map: map, icon: getMarkerIcon(point[0]), }); bounds.extend(pos); }); map.fitBounds(bounds); } initializeMaps(); 
 #map_canvas { width: 100%; height: 300px; } 
        

Ecco le icone personalizzate con lo stile di “aggiornamento visivo” aggiornato che puoi generare rapidamente tramite un semplice script .vbs. Ho anche incluso un ampio set pre-generato che puoi utilizzare immediatamente con più opzioni di colore: https://github.com/Concept211/Google-Maps-Markers

Utilizzare il seguente formato quando si collega ai file di immagine ospitati da GitHub:

 https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_[color][character].png 

colore
rosso, nero, blu, verde, grigio, arancione, viola, bianco, giallo

carattere
AZ, 1-100,!, @, $, +, -, =, (% 23 = #), (% 25 =%), (% 26 = &), (vuoto = •)

Esempi:

red1 https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_red1.png

blue2 https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_blue2.png

green3 https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_green3.png