Vous pouvez créer une carte Google custom avec une superposition d'image en utilisant Google Maps API Version 3 . Par exemple, vous pouvez superposer une carte contour USGS sur une carte Google existant pour générer une carte de randonnée détaillée de sentiers pour vos visiteurs de site Web . Utilisez le Google Maps " OverlayView " class ajouter des superpositions d'image de votre carte . Instructions
1
Ouvrez votre fichier HTML et localisez la section contenant votre code Google Maps.
2
Créer une variable globale appelée "overlay" en tapant la commande suivante dans votre code ci-dessus où vous initialiser votre carte :
var superposition ;
3
Localisez la fonction " initialize " de votre carte et ajouter une variable contenant le chemin d'accès au fichier d'image superposée : Photos
var IMAGESOURCE = ' graphics /map_hiking.jpg ';
4
Définir la variable globale de superposition. Par exemple, tapez : .
Overlay = new HikingOverlay ( bornes, srcImage , carte) ;
La variable de recouvrement appelle une fonction " HikingOverlay " , qui contient les paramètres pour la superposition d'image
5
créer la fonction de l'image de superposition . Dans cet exemple, la fonction est appelée " HikingOverlay ":
fonction HikingOverlay
( bornes, srcImage , carte)
6
initialiser les limites , la source d'image et les propriétés de la carte pour la randonnée fonction de superposition.
7
Créer une sous-classe de la fonction HikingOverlay . Utilisez une sous-classe afin de ne pas écraser les attributs de la classe parente. Par exemple, tapez :
HikingOverlay.sub = new google.maps.OverlayView ();
8
Fixez la superposition des fenêtres dans la fenêtre Google Maps. Vous pouvez utiliser les éléments " div " HTML pour positionner précisément la superposition ou simplement l'attacher à un volet si la superposition couvre toute la carte. Par exemple, créer la division et fixez la carte sur le volet en tapant:
HikingOverlay.sub.onAdd = function () {
division var = document.createElement ( 'div' ) ; Photos
var img = document.create.Element ( "img" ) ; div.appendChild ( img ) ;
sub_div = div ;
vitres var = this.getpanes (); panes.overlayLayer.appendChild (div) ; }
9
Placez le cache sur la carte en utilisant la méthode du « tirage au sort ». Par exemple, tapez :
HikingOverlay.sub.draw = function fonction de
() { var = overlayProjection this.getProjection ();}
10
Convertir la projection d'images à partir de la latitude et la longitude coordonne aux pixels pour le placement dans la div . Par exemple, tapez :
var = overlayProjection.fromLatLngToDivPixel du Nord-Ouest ( this.bounds_.getNorthWest ());
11
spécifier les dimensions de la div style pour s'adapter à l' image. Par exemple, tapez :
var div = this.div_ ; div.style.left = northWest.x + ' px ';
12
Enregistrez votre fichier et le tester. Google affiche votre image sur votre carte Google existant. Si l'image n'est pas correctement positionné , spécifier les coordonnées de positionnement supplémentaires à votre code à placer précisément l'image.
