Comment puis-je créer des repères de carte numérotés dans Google Maps V3?
je travaille sur une carte qui a plusieurs marqueurs dessus.
ces marqueurs utilisent une icône personnalisée, mais je voudrais aussi ajouter des numéros sur le dessus. J'ai vu comment cela a été accompli en utilisant des versions plus anciennes de L'API. Comment puis-je faire cela en V3?
* Note -- l'attribut "title" crée une infobulle lorsque vous passez la souris sur le marqueur, mais je veux quelque chose qui sera superposé sur le dessus de l'image personnalisée même si vous ne planez pas dessus.
Voici la documentation pour la classe marqueur, et aucun de ces attributs ne semble aider: http://code.google.com/apis/maps/documentation/v3/reference.html#MarkerOptions
15 réponses
malheureusement, ce n'est pas très facile. Vous pouvez créer votre propre marqueur personnalisé basé sur la classe OverlayView ( un exemple ) et y mettre votre propre HTML, y compris un compteur. Cela vous laissera avec un marqueur très basique, que vous ne pouvez pas traîner ou ajouter des ombres facilement, mais il est très personnalisable.
alternativement, vous pouvez ajouter une étiquette au marqueur par défaut . Ce sera moins personnalisable, mais devrait fonctionner. Il conserve également toutes les choses utiles à la norme marqueur.
vous pouvez en savoir plus sur les overlays dans L'article de Google Fun with MVC Objects .
modifier: si vous ne voulez pas créer une classe JavaScript, vous pouvez utiliser L'API de carte de Google . Par exemple:
marqueur numéroté:
http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000
marqueur de texte:
http://chart.apis.google.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|foo
c'est la route rapide et facile, mais elle est moins personnalisable, et nécessite une nouvelle image à télécharger par le client pour chaque marqueur.
Ce la façon dont je le fais dans la V3:
je commence par charger l'api GoogleMaps et par utiliser la méthode de rappel initialize() I load MarkerWithLabel.js que j'ai trouvé ici :
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>
je crée alors les marqueurs avec 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
});
}
depuis que j'ai ajouté mapIconLabel classe au marqueur je peux ajouter quelques règles css dans mon css:
.mapIconLabel {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
font-family: 'DINNextRoundedLTProMediumRegular';
}
Et voici le résultat:
Je n'ai pas assez de réputation pour commenter les réponses mais je voulais noter que L'API Google Chart a été dépréciée.
De la "151930920 API" page d'accueil :
la partie infographique de Google Chart Tools a été officiellement obsolète depuis le 20 avril 2012.
vous pouvez télécharger un jeu d'icônes numérotées à partir des sources fournies sur ce site:
alors vous devriez être en mesure de faire ce qui suit:
<!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>
capture d'écran de l'exemple ci-dessus:
Notez que vous pouvez facilement ajouter une ombre derrière les marqueurs. Vous pouvez vous voulez vérifier l'exemple à L'API de Google Maps référence: marqueurs Complexes pour plus d'informations à ce sujet.
ce code a été ajouté à la documentation cartographique et ne nécessite aucun code tiers.
Vous pouvez combiner ces deux échantillons:
https://developers.google.com/maps/documentation/javascript/examples/marker-labels
https://developers.google.com/maps/documentation/javascript/examples/icon-simple
pour obtenir le code comme ceci:
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);
notez que si vous avez plus de 35 marqueurs, cette méthode ne fonctionnera pas car l'étiquette montre seulement le premier caractère (en utilisant A-Z et 0-9 fait 35). Veuillez voter pour cette Google Maps Issue pour demander que cette restriction soit levée.
j'ai fait cela en utilisant une solution similaire à @ZuzEL.
au lieu d'utiliser la solution par défaut ( http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7/FF0000/000000 ), vous pouvez créer ces images comme vous le souhaitez, en utilisant JavaScript, sans aucun code côté serveur.
Google google.cartographie.Marker accepte Base64 pour sa propriété icon. Avec cela, nous pouvons créer une Base64 valide à partir d'un SVG.
vous pouvez voir le code pour produire la même que cette image dans ce plongeur: 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>dans cette démo, je crée le SVG en utilisant D3.js, puis transformé SVG en Canvas, pour que je puisse redimensionner l'image comme je le veux et après cela je reçois Base64 de canvas ' toDataURL méthode.
toute cette démo était basée sur mon camarade @thiago-mata code. Coup de coeur pour lui.
et ça? (année 2015)
1) Obtenir une image de marque personnalisée.
var imageObj = new Image();
imageObj.src = "/markers/blank_pin.png";
2) Créer un canvas dans RAM et y dessiner cette image
imageObj.onload = function(){
var canvas = document.createElement('canvas');
var context = canvas.getContext("2d");
context.drawImage(imageObj, 0, 0);
}
3) écrivez n'importe quoi au-dessus d'elle
context.font = "40px Arial";
context.fillText("54", 17, 55);
4) obtenir des données brutes de canvas et les fournir à L'API Google au lieu de L'URL
var image = {
url: canvas.toDataURL(),
};
new google.maps.Marker({
position: position,
map: map,
icon: image
});
code complet:
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)
};
});
la version 3 de Google Maps prend en charge les étiquettes de marqueur. Plus besoin de générer vos propres images ou d'implémenter des classes tierces. Marqueur Labels
il est tout à fait possible de générer des icônes étiquetées côté serveur, si vous avez quelques compétences de programmation. Vous aurez besoin de la bibliothèque GD sur le serveur, en plus de PHP. Je travaille bien pour moi depuis plusieurs années maintenant, mais il est vrai que c'est difficile de synchroniser les icônes.
je le fais via AJAX en envoyant les quelques paramètres pour définir l'icône vide et le texte et la couleur ainsi que bgcolor à appliquer. Voici mon 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']] );
c'est invoqué côté client via quelque chose comme le suivant: var image_file = "./ our_icons / gen_icon.le php?vide=" + escape(icônes[couleur]) + "&texte=" + iconStr;
Mes deux cents montrant comment utiliser le Google API Graphiques pour résoudre ce problème.
Basé sur @dave1010 réponse mais avec la mise à jour https des liens.
marqueur numéroté:
https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000
marqueur de texte:
https://chart.googleapis.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|Marker
vous pouvez utiliser le marqueur avec L'option D'étiquette dans google-maps-utility-library-v3.
il suffit de se référer https://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries
j'ai découvert la meilleure façon de le faire. Utilisez Snap.svg pour créer la svg et ensuite utiliser la fonction toDataURL() qui crée les données graphiques à inclure comme icône. Notez que j'utilise la classe SlidingMarker pour le marqueur qui me donne un beau mouvement du marqueur. Avec Le Composant Logiciel Enfichable.svg vous pouvez créer n'importe quel type de graphiques et votre carte aura l'air fantastique.
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()
});
SOLUTION LA PLUS FACILE - USE SVG
Works in: in IE9 , IE10 , FF, Chrome, Safari
(si vous utilisez d'autres navigateurs, veuillez" exécuter l'extrait de code "et faire un commentaire)
pas de dépendances externes à part L'API GoogleMaps!
ce est tout à fait facile à condition que vous ayez votre icône .svg format. Si c'est le cas juste ajouter élément de texte approprié et changer son contenu pour correspondre à vos besoins avec JS.
ajouter quelque chose comme ceci à votre code .svg (ceci est le texte "section" qui sera modifié plus tard avec 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>
exemple: (partiellement copié de @EstevãoLucas)
Important:
Utilisez les bonnes propriétés de l'étiquette <text> . Note text-anchor="middle" x="50%" y="28" quels sont les numéros plus longs du Centre (pour plus d'informations: comment placer et centrer le texte dans un rectangle SVG )
utiliser encodeURIComponent() (ce qui assure probablement la compatibilité avec IE9 et 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>plus d'informations sur inline SVG in Google Maps: https://robert.katzki.de/posts/inline-svg-as-google-maps-marker
Voici des icônes personnalisées avec le style" visual refresh " mis à jour que vous pouvez générer rapidement via un simple .script vbs. J'ai également inclus un grand ensemble pré-généré que vous pouvez utiliser immédiatement avec plusieurs options de couleur: https://github.com/Concept211/Google-Maps-Markers
utilisez le format suivant pour créer un lien vers les fichiers d'images hébergés par GitHub:
https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_[color][character].png
couleur
rouge, noir, bleu, vert, gris, orange, violet, blanc, jaune
caractère
A-Z, 1-100,!, @, $, +, -, =, (%23 = #), (%25 = %), (%26 = &), (blanc =•)
exemples:
https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_red1.png
https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_blue2.png
https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_green3.png
