Как плавно приближать в гугл картах

Увеличение, перемещение, поворот или наклон карты в приложении «Карты» на Mac

В приложении «Карты» на Mac выполните любое из указанных действий.

• Увеличение и уменьшение масштаба. Нажимайте кнопки увеличения и уменьшения ( и ) в нижнем правом углу карты. Чтобы видеть значение масштаба карты во время увеличения или уменьшения изображения, выберите меню «Вид» > «Показать масштаб карты». Масштаб отображается в левом верхнем углу.
• Перемещение вверх, вниз, влево или вправо. Удерживая нажатой кнопку мыши или трекпада, перетяните карту. На трекпаде можно также перетягивать карту двумя пальцами.
• Поворот карты. Удерживая нажатым указатель на компасе, перетягивайте его влево, вправо, вверх или вниз. После поворота карты можно вернуться к ориентации на север, нажав на компас или нажав сочетание клавиш Shift-Command-стрелка вверх.
• Наклон карты. Нажмите кнопку «3D» в панели инструментов, затем перетяните бегунок в правом нижнем углу.
• Просмотр в виде интерактивного трехмерного глобуса. Если у Вас Mac с чипом Apple, уменьшайте масштаб, пока карта не сменится глобусом. Чтобы повернуть глобус, потяните за него, или меняйте масштаб, чтобы изучать горные хребты, пустыни, океаны и другие объекты.

См. такжеНастройка оформления карты в приложении «Карты» на Mac

Google Maps: перемещение карты и маркеров

В одном из предыдущих сообщений я писал про то, как вывести карту с помощью Google Maps API и поставить на ней маркер. Тема, как выяснилось, весьма востребованная, и я решил начать по ней серию публикаций, где буду рассказывать о том, как сделать различые действия с Google Maps. Итак, сегодня речь пойдет о перемещении самой карты и маркеров на ней при наступлении каких-либо внешних событий.

MyMap = function () < 
self = this; // потребуется для ссылки на экземпляр MyMap во вложенных функциях 
this.map = new google.maps.Map(document.getElementById("map_canvas"), < zoom: 10, center: , // можно не создавать объект LatLng явно, а использовать литерал такого вида mapTypeId: google.maps.MapTypeId.ROADMAP >); 
this.markers = new Array; 
this.markers[0] = new google.maps.Marker( < position: new google.maps.LatLng(55.763525,37.560893), // опять обходимся без дополнительной переменной 
map: this.map, title: 'Пробная точка!' >); // сюда будет добавляться новый код 
>; 
myMap = new MyMap; 
google.maps.event.addDomListener(window, 'load', myMap); 

Здесь мы создали объект myMap, внутри которого хранится экземпляр карты, с которой мы работаем и массив маркеров на карте (пока с одним элементом). Кроме того, для того, чтобы повесить код отображения на событие onload, мы воспользовались методом google.maps.event.addDomListener, что является более правильным решением, чем использование window.onload, так как позволяет избежать переопределения обработчика, если он был задан где-то еще.

Шаг 1. Узнаем коордианты нужных объектов

Поскольку все объекты на карте привязаны к географическим коордианам, нам нужно сначала научится узнавать координаты интересущего нас места. Сделать это можно двумя способами: зайти на основной сайт Google Maps, найти там нужный объект, щелкнуть по нему правой кнопкой мыши и выбрать «Что это». Появится краткая информация об объекте, включая два числа в самой нижней строке. Это и будут его координаты.

Второй вариант — чуть более сложный, но он позволяет получить координаты не только точки, но и протяженных объектов в виде JSON. Для этого нужно выполнить запрос по адресу http://maps.googleapis.com/maps/api/geocode/json?address=название_объекта&sensor=false&language=ru, где вместо название_объекта подставляем требуемое название, например, http://maps.googleapis.com/maps/api/geocode/json?address=Нижний+Новогород&sensor=false&language=ru В полученном JSON можно использовать либо location (координаты центра), либо bounds (объект Rectangle с координатами границ протяженного объекта), либо viewport (координаты области просмотра для отображения объекта).

Шаг 2. Перемещение видимой области карты

Для перемещения видимой области в Google Maps API у объекта Map есть несколько методов: panTo, panToBounds и panBy, fitBounds, setCenter. Метод panTo плавно перемещает центр карты на указанные географические коордианты (объект LatLng), setCenter делает то же самое без анимации, panToBounds — смещает карту так, чтобы уместить в ней объект с заданными границами, fitBounds делает то же самое, но при необходимости еще меняет zoom (что полезно для больших объектов), и panBy — смещает карту на указанное количество пикселей.

Москва 
Санкт-Петербург 
Нижний Новогород
 
← Влево 
Вправо →

this.MoveMapTo = function(lat,lng) < 
return function(e) < 
self.map.panTo(new google.maps.LatLng(lat,lng)); 
> 
> 
google.maps.event.addDomListener(document.getElementById('moscow'), 'click', this.moveMapTo(55.763525,37.560893)); 
google.maps.event.addDomListener(document.getElementById('peterburg'), 'click', this.moveMapTo(59.939956, 30.344911)); 
google.maps.event.addDomListener(document.getElementById('n_novgorod'), 'click', this.moveMapTo(56.325418, 43.935667)); 

Поскольку в обработчик события onclick нельзя передавать параметры, мы применили возможность JavaScript под названием замыкание (closure). Работает оно следующим образом: возвращает анонимную функцию, где в качестве некоторых переменных используются переменные вышестоящей функции (в данном случае это параметры lat и lng), которые в момент создания «запоминаются». Вместо замыкания можно было написать три обычных функции, которые делали бы panTo на жестко прописанные в них координаты, и передать их имена вместо вызова this.moveMapTo, но это менее красивое и профессиональное решение.

google.maps.event.addDomListener(document.getElementById('map_left'), 'click', function () < 
self.map.panBy(25,0); 
>); 
google.maps.event.addDomListener(document.getElementById('map_right'), 'click', function () < 
self.map.panBy(-25,0); 
>);

Шаг 3. Перемещение маркера

setInterval(function() < 
self.markers[0].setPosition( new google.maps.LatLng(self.markers[0].getPosition().lat()+Math.random()*0.0002-0.0001, self.markers[0].getPosition().lng()+0.0001)); 
>,100); 

Шаг 4. Проверка, что объект находится в области видимости

setInterval(function() < 
if (self.map.getBounds().contains(self.markers[0].getPosition())) < 
self.map.panTo(self.markers[0].getPosition()); 
> 
>,5000);

Вот и все на сегодня! Посмотреть полностью работающий пример можно в прикрепленном файле. Пишите в комментариях, какие еще примеры действий с картами вы хотели бы увидеть, возможно, я расскажу о них в следующих выпусках.

Как сделать плавное зумирование в Yandex/Google картах?

Хочу сделать чтобы при заходе на страницу карта плавно сменила масштаб с страны до улицы. Помогите, как это сделать?

• Вопрос задан более трёх лет назад
• 1095 просмотров

Комментировать

Решения вопроса 0

Ответы на вопрос 1

Веб-программист

Я не очень большой специалист в картах, но работал с ними.
Так вот, масштаб там меняется шагами. Из-за чего масштабирование бывает только «дёрганое».
Это связано с тем, что карты передаются в браузер в виде небольших квадратиков и для каждого масштаба карты — квадратики свои. Невозможно плавно так сделать (ну или почти невозможно).

Ответ написан более трёх лет назад

Комментировать

Нравится Комментировать

Как плавно приближать в гугл картах

Узнайте, как пользоваться редактором стилей карт Map Styles в Google Cloud Console.

Даже если Google обновит стиль карты (например, стиль по умолчанию для отраслевой или базовой карты), внесенные вами изменения будут считаться приоритетными.

Главная страница редактора Map Styles

На главной странице редактора Map Styles собраны все ваши стили и отмечены те из них, для которых есть неопубликованные черновики. Также здесь можно создавать новые стили.

Страницы стилей карты

Если выбрать стиль на главной странице Map Styles, откроется страница с названием, описанием и изображением этого стиля. Здесь можно настроить, переименовать, скопировать или удалить стиль, а также связать с ним идентификаторы карт. С одним стилем может быть связано несколько идентификаторов карт (например, по одному для приложения Android, iOS и веб-приложения), но с идентификатором карты может быть связан только один стиль.

Элементы управления

Основные характеристики стиля можно настроить с помощью элементов управления, которые расположены справа в верхней части окна. Доступные элементы управления отображаются темно-синим цветом, а остальные – светло-серым.

Элемент управления Undo (Отменить) становится доступным после первого внесенного изменения. Элемент управления Redo (Повторить) активируется после первой отмены действия в текущем сеансе редактирования стиля. Оба эти элемента управления остаются доступными до момента сохранения стиля или завершения сеанса Cloud Console.

Элемент управления Publish (Опубликовать) становится доступным после первого сохранения (когда появляется первый черновик).

Важно! Опубликованные изменения стиля, связанного с одним или несколькими идентификаторами карт, сразу же становятся видны во всех приложениях, использующих эти идентификаторы. Пока вы не закончите работу, сохраняйте изменения стиля, но не публикуйте их.

История версий

Примечание. История версий доступна только для стилей, созданных после 2 августа 2022 г. Если при изменении стиля карты раскрывающееся меню Settings (Настройки) не отображается, значит, история версий недоступна для этого стиля.

Как только вы настроите и сохраните стиль, появится новая версия, которую можно будет просмотреть, восстановить или скопировать. Для работы с версиями стилей используйте панель Version History (История версий).

Чтобы посмотреть все версии определенного стиля, выполните следующие действия:

1. Перейдите на страницу Map Styles (Стили карты).
2. Выберите нужный стиль.
3. Нажмите Customize Style (Настроить стиль).
4. Выберите Settings > Version History (Настройки > История версий).

В правой верхней части экрана находятся кнопки Save и Publish. Они неактивны, пока открыта панель Version History. В нижней части панели Version History находятся кнопки Restore (Восстановить) и Duplicate (Скопировать) для операций с выбранной версией.

Есть два типа сохраненных версий стиля, которые отображаются в разных списках:

• Черновики
  • Если вы внесете изменения, но не сохраните стиль, изменения не сохранятся.
    Версии с несохраненными изменениями нельзя ни восстановить, ни скопировать. Они теряются при закрытии вкладки браузера и завершении сеанса в Cloud Console.
  • Если вы нажмете Save, будет создана датированная версия. Сохраненные черновики нельзя использовать в приложениях, пока вы не опубликуете их.
  • Если вы создадите новый, скопируете существующий стиль или импортируете стиль JSON, он будет автоматически опубликован.
  • При нажатии кнопки Publish (Опубликовать) создается датированная версия, которую можно использовать в приложениях. Если идентификатор карты в приложении связан с этим стилем, то для карты будет использована его последняя опубликованная версия.

  Предыдущую версию можно посмотреть, но нельзя изменить. Если вы хотите снова применить или изменить сохраненную или опубликованную версию, то ее нужно восстановить (сделать активной версией) или скопировать и создать на ее основе новый стиль.

  Если в момент восстановления версии у вас будут несохраненные изменения, то они автоматически сохранятся новой датированной версией черновика.

  Важно! Опубликованные изменения стиля, связанного с одним или несколькими идентификаторами карт, сразу же становятся видны во всех приложениях, использующих эти идентификаторы. Пока вы не закончите работу, сохраняйте изменения стиля, но не публикуйте их.

  Объекты и элементы

  Если выбрать Feature Type (Тип объекта) на левой панели редактирования, откроется панель Element Type (Тип элемента) с доступными вариантами редактирования этого объекта. Большинство редактируемых элементов объектов относятся к разделам Geometry (Геометрия) (цвет и контур) и Labels (Ярлыки) (текст и значки).

  Если выбрать один из вариантов на панели Element Type (Тип элемента), откроется панель Stylers (Параметры стилей) с вариантами редактирования этого элемента.

  

  Чтобы удалить стили для какого-либо объекта, снимите все флажки на панели Stylers (Параметры стилей) для каждого элемента.

  Уровни масштабирования

  С помощью панели Stylers вы можете применять отдельные настройки стиля к отдельным уровням масштабирования. Ознакомьтесь с примерами применения разных элементов для разных уровней.

  Многие элементы или стили отображаются на карте только при определенном масштабе. Например, 3D-модели здания не будут видны, когда на карте показан город, а название страны исчезнет, если приблизить карту настолько, что станет видна местная дорожная сеть. Стили дорог применяются, только когда видны сами дороги, а элементы стиля дорог (контуры, надписи) — только при достаточном для их просмотра увеличении.

  Выбор цвета

  Выбирать цвет элементов можно с помощью визуальной палитры или применяя коды RGB, HSV или шестнадцатеричные коды.

  

  Советы по работе с редактором стилей

  • Создайте «тестовую среду для стиля», в которой можно будет настраивать и отлаживать стили элементов для всех уровней масштабирования, прежде чем скопировать подходящие в «рабочий» стиль карты.
  • При первом использовании редактора стилей карт добавляйте стили только для элементов геометрии верхнего уровня или для заливки и контура, но не для того и другого сразу. То же относится и к тексту: изменяйте стиль текста верхнего уровня для всего ярлыка или отдельно стиль заливки и контура, но не оба этих стиля. Настройка стиля элемента на всех уровнях может оказаться сложным делом, особенно если вы изменяете стиль и заливки, и контура, или добавляете несколько стоп-уровней масштабирования.
  • Увеличивайте и уменьшайте масштаб, чтобы увидеть, как ваши стили выглядят на различных уровнях масштабирования.

  Отправить отзыв

  Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.

  Последнее обновление: 2023-06-26 UTC.

  Похожие публикации:

  1. Как добавить новый слайд в презентацию
  2. Как определить ос на ноутбуке
  3. Как очистить сайт на wordpress
  4. Почему не работает onedrive