Javascript Girl
  1. Javascript Girl
  3. Comment créer Google Latitude comme marqueurs?
Intereting Posts
JavaScript obtient un élément enfant Raphael.js traîne avec échelle provoque un comportement de saut étrange XmlHttpRequest sur l'intervalle de progression XMLHttpRequest: POST multipart / related avec XML et image comme charge utile Comment faire pour que mon navbar se défile en douceur vers le haut en cliquant sur la page Est-ce que je peux changer l'espace de noms de Dojo à d'autres que dojo? Passage manuel de l'animation CSS avec JavaScript Mettre en œuvre Promise.series comme alternative à Promise.all Configuration du serveur WebSocket sécurisé avec le client Jetty et JavaScript Existe-t-il un polyfill pour le module CSS Flexible Box Layout actuel selon W3C CR (affichage: flex etc.)? Est-il possible d'écouter les modifications apportées aux attributs d'un objet en JavaScript? La liste d'indices personnalisés CodeMirror ne fonctionne pas correctement RequireJS: nombre différent de dépendances et params à la fonction callback Pouvez-vous sélectionner l'élément script qui inclut le JavaScript? Comment puis-je décoder le code HTML codé dans JS en utilisant encodeURIComponent ()?

Comment créer Google Latitude comme marqueurs?

Dans mon application HTML5, j'utilise Google Map v3 et j'ajoute plusieurs marqueurs sur une carte. Il est facile de placer de nouveaux marqueurs et de changer d'icônes, mais j'aimerais pouvoir construire des marqueurs comme celui utilisé dans Google Latitude. Ces marqueurs sont configurés avec une image d'icône et une belle bordure.
Auriez vous des idées pour faire ça ?

Vous pouvez faire ce côté serveur ou, puisque vous utilisez HTML 5 et en supposant que vous avez la toile disponible, vous pouvez le faire sur le côté client. Voici une façon de le faire côté client en utilisant la toile HTML 5. Le faire en fonction du serveur variera selon la langue que vous utilisez, mais la technique serait similaire.

Téléchargez ces images et essayez-la. Les images doivent résider dans le même domaine que la page pour éviter une erreur de sécurité. Ils devraient également être dans le même répertoire, sauf si vous mettez à jour les emplacements dans le code HTML.

Face1Face2Face3Cadre

Une fois la page chargée, cliquez sur les visages et un marqueur aléatoire sera créé à l'aide de l'image de trame fournie et ajouté à la carte Google.

Entrez la description de l'image ici

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; utf-8"> <title>HTML 5 Canvas Image Processing</title> </head> <body> <img onclick="build(this)" id="face1" src="face1.png"/> <img onclick="build(this)" id="face2" src="face2.png"/> <img onclick="build(this)" id="face3" src="face3.png"/> <img id="frame" src="frame.png"/> <div id="map_canvas" style="width:640px;height:480px;"> </div> <script type="text/javascript"> function build(caller){ var image = getMergedUrl(document.getElementById("frame"), caller); var myLatLng = getRndPos(map.getBounds()); var myMarker = new google.maps.Marker({ position: myLatLng, map: map, icon: image }); } function getRndPos(bounds) { var xDiff = Math.abs(bounds.getNorthEast().lng() - bounds.getSouthWest().lng()); var yDiff = Math.abs(bounds.getNorthEast().lat() - bounds.getSouthWest().lat()); var xMin = Math.min(bounds.getNorthEast().lng(),bounds.getSouthWest().lng()); var yMin = Math.min(bounds.getNorthEast().lat(),bounds.getSouthWest().lat()); var x = xMin + xDiff * Math.random(); var y = yMin + yDiff * Math.random(); var pos = new google.maps.LatLng(y,x); return pos; } function getMergedUrl(frame, pic){ // Create an empty canvas element var canvas = document.createElement("canvas"); canvas.width = frame.width; canvas.height = frame.height; // Copy the image contents to the canvas var ctx = canvas.getContext("2d"); ctx.drawImage(frame, 0, 0); ctx.drawImage(pic, 4, 4); // Get the data-URL formatted image var dataURL = canvas.toDataURL("image/png"); return dataURL; } function initialize(){ var myLatlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } function loadScript(){ var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize"; document.body.appendChild(script); } window.onload = loadScript; </script> </body> </html>

Merci à Matthew Crumley pour le code toDataUrl d' ici .