¿Cómo puedo crear marcadores de mapas numerados en Google Maps V3?
https://stackoverflow.com/questions/2436484
-
19-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy trabajando en un mapa que tiene varios marcadores.
Estos marcadores usan un ícono personalizado, pero también me gustaría agregar números en la parte superior.He visto cómo esto se logró usando versiones anteriores de la API.¿Cómo puedo hacer esto en V3?
*Nota: el atributo "título" crea una información sobre herramientas cuando pasa el mouse sobre el marcador, pero quiero algo que se superponga a la imagen personalizada incluso cuando no esté sobre ella.
Aquí está la documentación para la clase de marcador y ninguno de estos atributos parece ayudar: http://code.google.com/apis/maps/documentation/v3/reference.html#MarkerOptions
Solución
Por desgracia, no es muy fácil. Se puede crear su propio marcador personalizado basado en la clase OverlayView ( un ejemplo ) y poner su propio código HTML en ella, incluyendo un contador. Esto te dejará con un marcador muy básico, que no se puede arrastrar alrededor o añadir sombras con facilidad, pero es muy personalizable.
Como alternativa, puede agregar una etiqueta a el marcador por defecto. Esta será menos personalizable, pero debería funcionar. También mantiene todas las cosas útiles marcador estándar hace.
Puede leer más acerca de las superposiciones en el artículo de Google con objetos MVC .
Edit: si no desea crear una clase de JavaScript, podría utilizar de Google Chart API . Por ejemplo:
marcador numerado:
http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000
marcador de texto:
http://chart.apis.google.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|foo
Esta es la ruta más rápida y fácil, pero es menos personalizable, y requiere una nueva imagen para ser descargado por el cliente para cada marcador.
Otros consejos
Esto cómo lo hago en V3:
Comienzo de cargar el API de Google Maps y dentro de la initialize() método de devolución de llamada me carga MarkerWithLabel.js que encontré aquí :
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]); <!-- MARKERS! -->
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;
</script>
I a continuación, crear los marcadores 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
});
}
Desde añadí mapIconLabel clase para el marcador que pueda añadir algunas reglas CSS en mi CSS:
.mapIconLabel {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
font-family: 'DINNextRoundedLTProMediumRegular';
}
Y aquí está el resultado:
No tengo la reputación suficiente para comentar sobre las respuestas, pero quería tener en cuenta que la API de gráficos de Google ya no se utiliza.
Desde el API página de inicio:
La parte Infografía de Google Chart Tools ha sido oficialmente obsoleta, ya que del 20 de abril de 2012.
Es posible que desee descargar un conjunto de iconos numerados desde las fuentes proporcionadas en este sitio:
A continuación, usted debería ser capaz de hacer lo siguiente:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Demo</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 11,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
for (var i = 0; i < locations.length; i++) {
var image = new google.maps.MarkerImage('marker' + i + '.png',
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34));
var location = locations[i];
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: location[0],
zIndex: location[3]
});
}
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize();">
<div id="map" style="width:400px; height:500px;"></div>
</body>
</html>
Captura del ejemplo anterior:
Tenga en cuenta que usted puede agregar fácilmente una sombra detrás de los marcadores. Es posible que desee comprobar el ejemplo en el API de Google Maps Referencia: Complejo marcadores para obtener más información sobre esto.
Esto ahora se ha añadido a la documentación Cartografía y no requiere ningún código de terceros.
Se pueden combinar estas dos muestras:
https://developers.google.com/maps/documentation/ javascript / Ejemplos / marcador de etiquetas
https://developers.google.com/maps/documentation/ javascript / ejemplos / icono simple
Para obtener el código siguiente:
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);
Tenga en cuenta que si usted tiene más de 35 marcadores, este método no funcionará como la etiqueta sólo muestra el primer carácter (usando A-Z y 0-9 hace 35). Por favor vote para este Google Maps Edición a la solicitud el levantamiento de esta restricción.
Hice esto usando una solución similar a @ZuzEL.
En lugar de utilizar la solución predeterminada (http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000), puedes crear estas imágenes como desees, usando JavaScript, sin ningún código del lado del servidor.
Google google.maps.Marker acepta Base64 como su propiedad de icono.Con esto podemos crear un Base64 válido a partir de un SVG.
Puedes ver el código para producir lo mismo que esta imagen en este 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;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
<div id="map_canvas"></div>
</body>
<script src="script.js"></script>
</html>En esta demostración, creo el SVG usando D3.js, luego transformo SVG a Canvas, para poder cambiar el tamaño de la imagen como quiera y luego obtengo Base64 del método toDataURL del lienzo.
Toda esta demostración se basó en mi compañero. @thiago-mata código.Felicitaciones para él.
¿Qué tal esto? (Año 2015)
1) Obtener una imagen de marcador personalizado.
var imageObj = new Image();
imageObj.src = "/markers/blank_pin.png";
2) Crear un canvas en RAM y dibujar esta imagen en él
imageObj.onload = function(){
var canvas = document.createElement('canvas');
var context = canvas.getContext("2d");
context.drawImage(imageObj, 0, 0);
}
3) cualquier cosa por encima de ella
context.font = "40px Arial";
context.fillText("54", 17, 55);
4) Obtener datos en bruto de la lona y proporcionarla a la API de Google en lugar de URL
var image = {
url: canvas.toDataURL(),
};
new google.maps.Marker({
position: position,
map: map,
icon: image
});
código 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 versión 3 ha incorporado soporte para etiquetas marcadores. No hay necesidad de generar sus propias imágenes más o implementar clases de 3 ª parte. etiqueta de marca
Es bastante factible para generar iconos etiquetados del lado del servidor, si tiene algunos conocimientos de programación. Que necesita la librería GD en el servidor, además de PHP. Estado trabajando bien para mí desde hace varios años, pero la verdad es difícil de conseguir las imágenes de iconos en sincronía.
Lo hago a través de AJAX mediante el envío de los pocos parámetros para definir el icono en blanco y el texto y el color, así como bgcolor a aplicar. Aquí está mi 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']] );
Se invoca el lado del cliente a través de algo como lo siguiente: image_file var = "./our_icons/gen_icon.php?blank=" + escapar (iconos [color]) + "& texto =" + iconStr;
Mis dos centavos que muestran cómo utilizar el Google Charts API para resolver este problema.
@ dave1010 respuesta, pero con enlaces https actualizados.
marcador numerado:
https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000
marcador de texto:
https://chart.googleapis.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|Marker
Puede utilizar la opción de marcador con la etiqueta en Google mapas-utilidad-biblioteca-v3.
https://code.google .com / p / google-maps-utilidad-biblioteca-v3 / wiki / Bibliotecas
he descubierto la mejor manera de hacerlo. Utilice Snap.svg para crear el SVG y luego usar la función toDataURL () que crea los datos de gráficos para incluir como icono. Nótese que uso la clase SlidingMarker para el marcador que me da buen movimiento del marcador. Con Snap.svg puede crear cualquier tipo de gráficos, y su mapa se verá fantástico.
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()
});
FÁCIL SOLUCIÓN - USO SVG
Obras en: IE9 , IE10 , FF, Chrome, Safari
(si está utilizando otros navegadores por favor "Ejecutar código de fragmento" y colocar un comentario)
No hay dependencias externas, además de la API de Google Maps!
Este es muy siempre fácil que usted tiene su icono en formato .svg. Si ese es el caso que acabamos de Añadir elemento de texto adecuado y cambie su contenido para satisfacer sus necesidades con JS.
Agregar algo como esto a su código .svg (esto es "sección" de texto que se cambió más tarde con JS):
<text id="1" fill="#20539F" font-family="NunitoSans-ExtraBold, Nunito Sans" font-size="18" font-weight="600" letter-spacing=".104" text-anchor="middle" x="50%" y="28">1</text>
Ejemplo: (parcialmente copiado de @ EstevãoLucas)
Importante:
El uso correcto propiedades de la etiqueta <text>. Nota text-anchor="middle" x="50%" y="28" que se centran números más largos (más información: Cómo lugar y centro de texto en un rectángulo SVG )
Uso encodeURIComponent() (esto probablemente garantiza la compatibilidad con IE9 y 10)
// Most important part (use output as Google Maps icon)
function getMarkerIcon(number) {
// inline your SVG image with number variable
var svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 40 40"> <defs> <rect id="path-1" width="40" height="40"/> <mask id="mask-2" width="40" height="40" x="0" y="0" fill="white"> <use xlink:href="#path-1"/> </mask> </defs> <g id="Page-1" fill="none" fill-rule="evenodd"> <g id="Phone-Portrait---320" transform="translate(-209 -51)"> <g id="Group" transform="translate(209 51)"> <use id="Rectangle" fill="#FFEB3B" stroke="#F44336" stroke-width="4" mask="url(#mask-2)" xlink:href="#path-1"/> <text id="1" fill="#20539F" font-family="NunitoSans-ExtraBold, Nunito Sans" font-size="18" font-weight="600" letter-spacing=".104" text-anchor="middle" x="50%" y="28">' + number + '</text> </g> </g> </g> </svg>';
// 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;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map_canvas"></div>
</body>
<script src="script.js"></script>
</html>
Más información sobre SVG en línea en Google Maps: https: //robert.katzki.de/posts/inline-svg-as-google-maps-marker
Tal vez no son los que siguen buscando este pero encontrar los iconos de Google dinámicos en desuso y otras bibliotecas mapa-icono sólo un poco demasiado feo.
Para añadir un marcador sencilla con cualquier número dentro mediante una dirección URL. En Google Drive con la aplicación Google My Maps, crea iconos numerada cuando se utiliza una capa de mapa que se establece en 'secuencia de números' y luego agregar los marcadores / puntos en el mapa.
Mirando el código fuente, Google tiene su propia manera de hacerlo a través de una URL:
https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-container-bg_4x.png,icons/onion/SHARED-mymaps-container_4x.png,icons/onion/1738-blank-sequence_4x.png&highlight=ff000000,0288D1,ff000000&scale=2.0&color=ffffffff&psize=15&text=56&font=fonts/Roboto-Medium.ttf
No he jugado mucho con él, pero cambiando los códigos de color hexadecimal en el parámetro 'destacado' (parámetro de color no cambia el color como usted puede pensar), el valor de 'texto' se puede ajustar a cualquier cadena y se puede hacer un icono circular agradable con cualquier número / valor dentro. Estoy seguro que los otros parámetros pueden ser de utilidad también.
Una advertencia con este enfoque, que sabe cuando Google eliminará este URL desde el mundo!
Estos son los iconos personalizados con el estilo actualizado "actualización visual" que puede generar rápidamente a través de un simple script .vbs. También he incluido un conjunto grande de pre-generados que se puede utilizar de inmediato con múltiples opciones de color: https: / /github.com/Concept211/Google-Maps-Markers
Utilice el siguiente formato cuando se enlaza a los archivos de imágenes alojadas en GitHub:
https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_[color][character].png
Color
rojo, negro, azul, verde, gris, naranja, morado, blanco, amarillo
carácter
A-Z, 1-100,, @, $, +, -, =, (23% = #), (25% =%), (26% = &), (en blanco = •)
Ejemplos:
