Основы карт Google
Создать простую карту Google
Теперь давайте создадим простую карту Google.
Вот карта Google, показывающая Лондон, Великобритания:
Пример
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js? google.maps.latlng (51.508742, -0.120850), Zoom: 5, MaptyPeid: Google.maps.maptypeid.roadmap}; var map = new Google.maps.map (document.getElementById ("GoogleMap"), MapProp); инициализировать); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>Примеры визуализации (можно скопировать и работать напрямую, конечно, вам нужно иметь возможность получить доступ к Google)
Пример анализа
Мы используем приведенный выше пример для анализа процесса создания карт Google.
Почему приложение объявляет HTML5?
<! Doctype html>
Большинство браузеров используют страницы рендеринга документов HTML5 «Стандартный режим», что означает, что ваше приложение совместимо с основными браузерами.
Кроме того, если нет тега Doctype, браузер использует режим Quirks, чтобы отображать содержание страницы.
Совет: следует отметить, что CSS некоторых «беспорядочных режима» не может использоваться со стандартным режимом. В конкретных приложениях все процентные размеры должны быть унаследованы от исходного элемента блока. Если в родительском модуле не указано размер, значение по умолчанию составляет 0 x 0 пикселей. Если вы хотите использовать проценты, вы можете объявить их в теге <style> следующим образом:
<Style Type = "text/css"> html {height: 100%} body {height: 100%; маржа: 0; падки: 0} #googlemap {height: 100%} </style>Это утверждение стиля указывает на то, что модуль карты (GoogleMap) должен иметь высоту HTML 100%.
Добавить ключ Google Maps API
API Google Maps должен быть включен в первое тег <Script> в следующем примере:
<script src = "http://maps.googleapis.com/maps/api/js?key=your_api_key&sensor=true_or_false"> </script>
Поместите ключ API, сгенерированный Google в параметр ключа (key = your_api_key).
Требуется параметр датчика, который указывает, использует ли приложение датчик (аналогичный навигации GPS) для поиска местоположения пользователя. Значение параметра может быть установлено на TRUE или FALSE.
Https
Если ваше приложение является безопасным приложением HTTP (HTTPS: HTTP Secure), вы можете использовать HTTPS для загрузки API Google Maps:
<script src = "https://maps.googleapis.com/maps/api/js?key=your_api_key&sensor=true_or_false"> </script>
Асинхронная загрузка
Точно так же мы можем загрузить API Google Maps после того, как страница полностью загружена.
В следующем примере используется Window.onload для достижения полной загрузки карт Google. Функция LoadScript () создает загрузку Google Maps API <Script>. Кроме того, параметр инициализации добавляется в конце тега. Инициализация (), поскольку функция обратного вызова будет выполнена после полной загрузки API:
Пример
<! Doctype html> <html> <head> <script> function initiaze () {var mapprop = {center: new Google.maps.latlng (51.508742, -0.120850), Zoom: 7, MaptyPeid: Google.maps.maptypeid.Roadmap}; var map = new Google.maps.map (document.getElementById ("googleMap"), MapProp);} function loadScript () {var script = document.createElement ("script"); script.type = "text/javascript"; script.src = "http://maps.googleapis.com/maps/api/js? document.body.appendchild (script);} window.onload = loadscript; </script> </head> <body> <div id = "googlemap"> </div> </body> </html>Определить свойства карты
Перед инициализацией карты нам нужно создать объект свойства карты, чтобы определить некоторые свойства карты:
var mapprop = {center: new Google.maps.latlng (51.508742, -0.120850), Zoom: 7, maptypeid: Google.maps.maptypeid.roadmap};Центр (центральная точка)
Свойство центра определяет центр карты, который создает центральную точку на карте через координаты (широта, долгота).
Zoom (Zoom Series)
Свойство Zoom указывает диапазон масштабирования карты. Зум: 0 показывает полное масштаб всей карты Земли.
Maptypeid (начальный тип карты)
Свойство MaptyPeid указывает начальный тип карты.
Maptypeid включает в себя следующие четыре типа:
google.maps.maptypeid.hybrid: прозрачный слой главной улицы, который отображает спутниковое изображение
Google.maps.maptypeid.roadmap: Показать нормальную карту улицы
google.maps.maptypeid.satellite: отображение спутникового изображения
Google.maps.maptypeid.terrain: Показать карты с природными функциями, такими как местность и растительность
Где отображать карты Google
Обычно карты Google используются в элементах <div>:
<div id = "googlemap"> </div>
Примечание. Карта отобразит размер карты с размером, установленным в DIV, поэтому мы можем установить размер карты в элементе <div>.
Создать объект карты
var map = new Google.maps.map (document.getElementById ("GoogleMap"), MapProp);
Приведенный выше код использует параметр (mapprop) для создания новой карты в элементе <div> (ID - GoogleMap).
Совет: если вы хотите создать несколько карт на странице, вам просто нужно добавить новый объект карты.
В следующем примере определяется четыре экземпляра карты (четыре карты используют разные типы карт):
Пример
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js? google.maps.latlng (51.508742, -0.120850), Zoom: 9, MaptyPeid: Google.maps.maptypeid.roadmap}; var mapprop2 = {center: new Google.maps.latlng (51.508742, -0.120850), Zoom: 9, maptypeid: google.maps.maptypeid.satellite}; var mapprop3 = {center: new Google.maps.latlng (51.508742, -0.120850), Zoom: 9, maptypeid: google.maps.maptypeid.hybrid}; var mapprop4 = {center: new Google.maps.latlng (51.508742, -0.120850), Zoom: 9, maptypeid: Google.maps.maptypeid.terrain}; var map = new Google.maps.map (document.getElementById ("GoogleMap"), MapProp); var map2 = new Google.maps.map (document.getElementById ("GoogleMap2"), MapProp2); var map3 = new Google.maps.map (document.getElementById ("GoogleMap3"), MapProp3); var map4 = new Google.maps.map (document.getElementById ("GoogleMap4"), MapProp4);} Google.maps.event.adddomListener (окно, «нагрузка», инициализация); </script> </head> <body> <div id = "GoogleMap"> </div> div div = div = div = div 'div = div = div' div = div = div = div = div = div div. id = "googlemap3"> </div> <br> <div id = "googlemap4"> </div> </body> </html>Загрузка карты
После того, как окно загружается, объект MAP инициализируется путем выполнения функции инициализации (), которая гарантирует, что Google Карты загружаются после полной загрузки страницы:
google.maps.event.adddomlistener (Window, 'Load', инициализация);
Выше представляет собой компиляцию основной информации о картах Google. Мы продолжим добавлять его позже. Спасибо за поддержку этого сайта!