Le meilleur didacticiel base de Google Maps en 2024, dans ce didacticiel, vous pouvez apprendre Créer un simple Google Maps,Exemples,Des exemples d'analyses,Pourquoi devrait déclarer le HTML5 d'application?,Ajouter Google Maps API Key,Exemples,Custom Map Propriétés,Où afficher Google Maps,Créer un objet cartographique,Exemples,Chargement de la carte,
Maintenant, nous allons créer un simple Google Maps.
Ce qui suit est un graphique montrant la Google Maps Londres:
Dans l'exemple ci-dessus, nous créons un processus pour résoudre la carte Google.
La plupart des navigateurs utilisent le «modèle standard» de HTML5 rendre le document de page, ce qui signifie que votre application est compatible avec tous les principaux navigateurs.
De plus, s'il n'y a pas de balise DOCTYPE, le navigateur que vous utilisez le mode promiscuous (mode quirks) pour rendre le contenu de la page.
Astuce: Il est à noter que certains "mode promiscuité" dans le CSS et vous ne pouvez pas utiliser le mode standard.Dans une application particulière, tous doivent hériter d'éléments de bloc de parents sur la base d'un pourcentage de la taille. Si vous ne spécifiez pas la taille du module dans le parent, la valeur 0 x 0 pixels par défaut. Si vous voulez utiliser des pourcentages, peut être déclaré dans la balise <style>, comme suit:
Ce module de déclaration de style carte show (GoogleMap) devrait être la hauteur HTML de 100%.
Dans l'exemple suivant la première balise <script> doit être inclus dans Google Maps API:
La clé API Google généré placé dans les paramètresclés(key= YOUR_API_KEY).
Le paramètre de détection est nécessaire, le paramètre est utilisé pour indiquer si l'application utilise un capteur (similaire à la navigation GPS) pour localiser l'emplacement de l'utilisateur.Les valeurs des paramètres peuvent être réglés pour vrai ou faux.
HTTPS
Si votre application est HTTP sécurisé (HTTPS: HTTP sécurisé) l'application, vous pouvez utiliser HTTPS pour charger l'API Google Maps:
chargement asynchrone
De même, nous pouvons également charger l'API Google Maps après que la page soit entièrement chargée.
L'exemple suivant utilise window.onload pour mettre en œuvre complètement chargé lorsque la page est chargée de Google Maps. loadScript () crée charger l'API Google Maps <script> tag. En outre, à la fin de l'étiquette pour le rappel = initialiser les paramètres, initialize () sera exécutée après l'API est entièrement chargé en tant que la fonction de rappel:
Avant d'initialiser la carte, nous avons besoin de créer un objet de la carte pour définir la propriété propriétés de la carte:
centre (centre)
attribut Centre spécifie le centre de la carte, qui par des coordonnées (latitude, longitude) pour créer un point central sur la carte.
Zoom (Zoom Series)
propriété zoom zoom de la carte indique le nombre d'étapes. zoom: 0 montrer la pleine échelle de la carte entière de la Terre.
MapTypeId (carte de type initial)
attribut type mapTypeId spécifie la carte initiale.
mapTypeId comprend les quatre types suivants:
Généralement utilisé dans Google Maps élément <div>:
Note: La taille dela carte sera div définie pour indiquer la taille de la carte, afin que nous puissions définir la taille de la carte dans l'élément <div>.
Le code ci-dessus utilise le paramètre (mapProp) dans l'élément <div> (id est googleMap) crée une nouvelle carte.
Astuce: Si vousvoulez créer plusieurs pages de carte, il vous suffit d'ajouter de nouveaux objets de la carte peuvent être.
L'exemple suivant définit quatre cartes d'instance (cartes en utilisant quatre types de cartes différentes):
Carte fenêtre afin d'initialiser l'objet après le chargement en exécutant la fonction initialize (), qui assure que la page soit entièrement chargée avant le chargement des Google Maps: