Comment puis-je créer des marqueurs numérotés de carte dans Google Maps V3?
https://stackoverflow.com/questions/2436484
-
19-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je travaille sur une carte qui a plusieurs marqueurs sur elle.
Ces marqueurs utilisent une icône personnalisée, mais je voudrais aussi ajouter des numéros sur le dessus. Je l'ai vu comment cela a été accompli en utilisant les anciennes versions de l'API. Comment puis-je faire cela en V3?
* Remarque - l'attribut « title » crée une info-bulle lorsque vous mouseover le marqueur, mais je veux quelque chose qui sera en couches sur le dessus de l'image personnalisée, même lorsque vous n'êtes pas en vol stationnaire au-dessus de celui-ci
Voici la documentation de la classe de marqueurs, et aucun de ces attributs semblent aider: http://code.google.com/apis/maps/documentation/v3/reference.html#MarkerOptions
La solution
Malheureusement, il est pas très facile. Vous pouvez créer votre propre marqueur personnalisé basé sur la classe OverlayView ( un exemple ) et de mettre votre propre code HTML dans, y compris un compteur. Cela vous laissera avec un marqueur très basique, que vous ne pouvez pas glisser autour ou ajouter des ombres facilement, mais il est très personnalisable.
Vous pouvez ajouter une étiquette à le marqueur par défaut . Ce sera moins personnalisable mais devrait fonctionner. Il conserve également toutes les choses utiles marqueur standard fait.
Vous pouvez en savoir plus sur les superpositions à l'article Fun Google avec des objets MVC .
Edit: si vous ne voulez pas créer une classe JavaScript, vous pouvez utiliser Chart API de Google . Par exemple:
Numéroté marqueur:
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
est rapide et facile la route, mais il est moins personnalisable, et nécessite une nouvelle image à télécharger par le client pour chaque marqueur.
Autres conseils
comment je le fais en V3:
Je commence par charger les cartes google api et dans la méthode de rappel initialize() je charge MarkerWithLabel.js que j'ai trouvé :
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'ajouté mapIconLabel classe au marqueur que je peux ajouter des 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 réputation de commenter les réponses mais je voulais noter que l'API Google Chart a été désapprouvée.
De la API page d'accueil :
La partie Infographies de Google Outils de graphique a été officiellement abandonné le 20 Avril, de 2012.
Vous pouvez télécharger un ensemble d'icônes numérotées à partir des sources fournies sur ce site:
Ensuite, 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 consulter l'exemple au API Google Maps Référence: Complexe marqueurs pour plus d'informations à ce sujet.
Cela a été ajouté à la documentation de cartographie et ne nécessite aucun code tiers.
Vous pouvez combiner ces deux échantillons:
https://developers.google.com/maps/documentation/ JavaScript / exemples / marqueur labels
https://developers.google.com/maps/documentation/ javascript / examples / icône-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 comme l'étiquette indique que le premier caractère (en utilisant A-Z et 0-9 fait 35). S'il vous plaît voter pour cette Google Maps Problème à la demande que cette limitation est levée.
Je l'ai fait en utilisant une solution similaire à @ZuzEL.
Au lieu d'utiliser la solution par défaut ( http: // tableau .apis.google.com / tableau chst = d_map_pin_letter & enf = 7 |? FF0000 |. 000000), vous pouvez créer ces images que vous le souhaitez, en utilisant JavaScript, sans code côté serveur
Google accepte google.maps.Marker base64 pour sa propriété icône. Avec cela, nous pouvons créer un base64 valide d'un SVG.
Vous pouvez voir le code pour produire le même que cette image dans ce 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>
Dans cette démo je crée le SVG en utilisant d3.js, puis transformé SVG Canvas, donc je peux redimensionner l'image que je veux et après que je reçois base64 de la méthode toDataURL de toile.
Toute cette démonstration a été basé sur mon compatriote @ thiago-mata code . Coup de coeur pour lui.
Comment cela? (Année 2015)
1) Obtenir une image marqueur personnalisé.
var imageObj = new Image();
imageObj.src = "/markers/blank_pin.png";
2) Insérer un canvas dans RAM et tirer cette image sur ce
imageObj.onload = function(){
var canvas = document.createElement('canvas');
var context = canvas.getContext("2d");
context.drawImage(imageObj, 0, 0);
}
3) Ecrire quoi que ce soit au-dessus
context.font = "40px Arial";
context.fillText("54", 17, 55);
4) Obtenir des données brutes de toile et de fournir à l'API Google au lieu d'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)
};
});
Google Maps version 3 a un support intégré pour les étiquettes de marquage. Pas besoin de générer vos propres images plus ou mettre en œuvre des classes 3ème partie. étiquettes marqueurs
Il est tout à fait possible de générer si vous avez côté serveur icônes marquées, des compétences en programmation. Vous aurez besoin de la bibliothèque GD au serveur, en plus de PHP. Travaille bien pour moi depuis plusieurs années, mais il est vrai difficile à obtenir les images d'icônes dans le synch.
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']] );
Il est invoqué côté client via quelque chose comme ce qui suit: var image_file = "./our_icons/gen_icon.php?blank=" + escape (icônes [color]) + "& text =" + iconStr;
Mes deux cents montrant comment utiliser le Google API graphiques pour résoudre ce problème.
Basé sur @ dave1010 réponse, mais avec des liens https mises à jour.
Numéroté marqueur:
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'étiquettes dans les cartes google-utilitaire-bibliothèque v3.
Il suffit de consulter https://code.google .com / p / google-maps-utilitaire-bibliothèque-v3 / wiki / bibliothèques
J'ai découvert la meilleure façon de le faire. Utilisez Snap.svg pour créer le svg puis utilisez la fonction toDataURL () qui crée les données graphiques à inclure icône. Notez que j'utilise la classe SlidingMarker pour le marqueur qui me donne beau mouvement du marqueur. Avec Snap.svg vous pouvez créer tout type de graphique et votre carte sera 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 - UTILISATION SVG
Travaux en: IE9 , IE10 , FF, Chrome, Safari
(si vous utilisez d'autres navigateurs Veuillez « Exécuter extrait de code » et placer un commentaire)
Pas de dépendances externes en dehors de l'API Google Maps!
tout à fait facile à condition que vous avez votre icône .svg format . Si tel est le cas juste Ajouter élément de texte approprié et modifier son contenu pour répondre à vos besoins avec JS.
Ajoutez quelque chose comme ceci à votre code .svg (ce texte est « section », qui sera plus tard changé 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ée à partir de @ EstevãoLucas)
Important:
Utiliser les propriétés de balises <text> correctes. Remarque text-anchor="middle" x="50%" y="28" dont le centre des numéros plus longs (plus d'info: Comment lieu et Centrer le texte dans un rectangle SVG )
Utilisez 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>
En savoir plus sur SVG en ligne dans Google Maps: https: //robert.katzki.de/posts/inline-svg-as-google-maps-marker
Peut-être il y a ceux qui cherchent encore pour cela, mais trouver des icônes dynamiques Google dépréciées et d'autres bibliothèques map-icon juste un peu trop laid.
Pour ajouter un marqueur simple avec un nombre intérieur à l'aide d'une URL. Dans Google Drive avec Google My Maps, il crée des icônes numérotées lors de l'utilisation d'une couche de carte qui est réglée sur « séquence de nombres », puis en ajoutant des marqueurs / points sur la carte.
En regardant le code source, Google a sa propre façon de le faire à travers une 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
Je ne l'ai pas joué beaucoup avec mais en changeant les codes de couleur hexadécimal dans le paramètre « highlight » (paramètre de couleur ne change pas la couleur que vous pouvez penser), la valeur « texte » peut être réglé sur une chaîne et vous pouvez faire une belle icône ronde avec un nombre / valeur à l'intérieur. Je suis sûr que les autres paramètres peuvent être utiles aussi.
Une mise en garde avec cette approche, qui sait quand Google va supprimer cette URL du monde!
Voici les icônes personnalisées avec la mise à jour style « rafraîchissement visuel » que vous pouvez générer rapidement par un simple script .vbs. J'ai aussi inclus un grand nombre prégénérée que vous pouvez utiliser immédiatement avec de multiples options de couleur: https: / /github.com/Concept211/Google-Maps-Markers
Utilisez le format suivant le lien vers les fichiers d'images hébergées sur 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:
