Как я могу выделить/покрыть регион или несколько регионов с разными цветами (например, 3 штата США), используя карты многоугольников Google Maps? Я нашел туту в коде Google о том, как рисовать многоугольник, но он не дает подробной информации. Благодарим вас за помощь.
Sam 21 июнь 2011, в 23:47
Поделиться
Привет, вы смогли выделить штаты? Я ищу то же самое, но не могу найти решение. С уважением
user427969 12 окт. 2011, в 02:40
Поделиться:
1 ответ
Эта документация по Google примерно так же прямолинейна, как вы можете получить.
Посмотрите источник этой страницы. Скопируйте и вставьте код на свою страницу и начните оттуда.
В приведенном выше примере вам просто нужно сделать более одного экземпляра bermudaTriangle и называть его чем-то другим и добавить его на карту.
Caimen 21 июнь 2011, в 22:34
Поделиться
Ещё вопросы
- 0 показывая загрузочный образ php
- 0 Google App Engine dns_get_record
- 0 Выберите двойным щелчком или одной буквой div, который делает фокус ввода
- 0 SQLSTATE [HY000]: общая ошибка: 1364 Поле ‘name’ не имеет значения по умолчанию laravel 5.5
- 1 Влияет ли размер приложения Android на неиспользуемый импорт?
- 1 Проверьте наличие специальных символов без использования регулярных выражений
- 0 Некоторые основные вопросы о JWT (на стороне сервера и клиента)
- 0 Вызовите функцию jquery, когда новый элемент отображается на странице
- 0 Как сохранить значение, установленное в JavaScript после обратной передачи
- 1 Android: правильное место для создания канала уведомлений
- 0 Реализация jquery mmenu не видна в представлении вообще
- 0 Когда я изменяю значение ввода, нажатие на кнопку $ bindTo не работает firebase
- 0 GetElementsByClassName — Perl?
- 0 Директива общего доступа между приложениями в AngularJS
- 0 Сортировка списка двойных ссылок по убыванию
- 1 Я хочу скачать JDK Windows 32 бит
- 0 JQuery — введите данные в поле ввода и предупредить их на экране
- 1 android.R.anim.fade_out Не работает хорошо, просто исчезает в работе
- 0 Отправка электронной почты с веб-страницы HTML без использования Outlook
- 0 Выборка площади против выборки BRDF при рендеринге
- 0 Выбор даты угловой UI, приводящий к значению $ valid, равному false
- 0 event.preventDefault (); перестал работать в ФФ
- 1 Почему каждое исключение является системным исключением?
- 1 Странный артефакт при обновлении заголовка Pivot в Windows Phone 8
- 0 Как назначить переменную для объекта JSON
- 1 Определить состояние сети и загрузить видео данные из фона, когда приложение убито в Android пирог (API 28)
- 0 Вставка данных из базы данных в массив и внедрение этих данных в текстовую область
- 1 FirebaseVisionImage: переменная ‘image’, возможно, не была инициализирована
- 1 Как я могу выбрать все подузлы узла, а не всех потомков?
- 0 привязки сервисов уровня приложения в облачном литейном приложении для весенней загрузки
- 0 Как проверить 3 начальные цифры на ИД пользователя с PHP?
- 0 Как расположить кнопку ввода файла с правой стороны внутри текстового поля
- 0 Элементы формы диалогового окна JQuery UI не отправляются вместе с формой
- 1 удалить список элементов из ObservableCollection , определенный DateTime
- 0 Синтаксическая ошибка при обновлении столбцов
- 0 Foreach с огненной базой
- 0 yii загружать элементы CRUD в другое место
- 1 Как передать несколько строк в программу Python
- 1 Pandas applymap ошибка памяти
- 1 Как я могу открыть два ServerSocket одновременно
- 1 Может кто-нибудь объяснить, пожалуйста, следующий код
- 0 Angular.js 401 Неразрешенный код статуса
- 0 Ошибка частного указателя в связанном списке C ++
- 0 Переключение языков не работает
- 1 Android: отображение неверной даты окончания (за день до фактической даты) в Календаре Google при добавлении события с намерением
- 1 Как я могу получить размеры GridBagLayout?
- 0 Сложный JSON повторяется
- 0 Форма входа Python Mechanize, отправка ввода в поле со случайно сгенерированным именем
- 0 Жасмин — модульное тестирование директивы: получение undefined не является объектом
- 1 Проблема с установкой релиза Apk
Источник: overcoder.net
Как сохранить картинку с Яндекс/Гугл карты
Как выделить карту в гугле
О сервисах Google Maps и Яндекс.Карты слышали, наверное, практически все пользователи интернета. Но если для рядового пользователя их возможности ограничиваются стандартным интерфейсом, то для разработчиков всё гораздо интереснее.
Оба сервиса предоставляют API, который позволяет получить дополнительную информацию, изменить внешний вид и работу карт.
Сегодня я хочу показать небольшой пример, позволяющий посетителю выделить область на карте (использоваться будут Google Maps). В дальнейшем, эту область можно сохранить в базе данных вашего сайта.
Прежде всего, сформулируем задачу.
Посетителю нужно каким-то образом указать какую область он хочет выделить. На мой взгляд, для этих целей удобно использовать многоугольники и окружности. Первые позволяют точнее выделить нужную область, вторые – требуют меньше действий от пользователя (достаточно указать центр и задать радиус).
Т.к. для обоих случаев API практически одинаков, рассмотрим вариант с окружностью.
Итак, принцип работы будет следующий.
1) Посетитель кликает по произвольной точке на карте, мы ставим на неё маркер (чтобы удобнее было ориентироваться) и считаем её центром области.
2) Посетитель кликает по любой точке на границе области. Мы рассчитываем расстояние от неё до центра (радиус) и строим окружность.
Если посетитель захочет изменить область, то ему будет достаточно снова сделать два клика. Мы убираем старую окружность и строим новую.
Поэкспериментировать с этим примером можно на демонстрационной страничке или, если хотите, качайте архив с исходными файлами.
Переходим к реализации.
Прежде всего, создадим страницу с картой.
Окружности на Google Maps
Здесь всё предельно просто. Создаём блок для карты (my_map), указываем его размеры (600х400 px) и подключаем файл со скриптами (main.js), которые будут выполнять всю работу.
Рассмотрим подробнее main.js.
В первую очередь нам нужно подключить карту.
var map, circle, circleOptions, setCenter, marker; function initialize() < var myLatlng = new google.maps.LatLng(50.45127, 30.523368); //Kiev var myOptions = < zoom: 9, center: myLatlng, mapTypeId: google.maps.MapTypeId.HYBRID >map = new google.maps.Map(document.getElementById(«my_map»), myOptions); > function loadScript() < var script = document.createElement(«script»); script.src = «http://maps.google.com/maps/api/js?sensor=false; document.body.appendChild(script); >window.onload = loadScript;
Работает этот код следующим образом. При возникновении события window.onload (завершена загрузка страницы) будет вызвана функция loadScript, которая добавит в конец страницы тег script, подключающий Google Maps.
Обратите внимание на GET параметр callback. В нём передаётся название функции (initialize), которая будет вызвана сразу после загрузки скрипта.
В этой функции (initialize) мы указываем настройки (координаты центра, приближение, тип карты) и создаём карту (строка 10).
В результате внутри блока my_map появится обычная карта Google.
Переходим к созданию окружности.
Прежде всего, немного теории.
С точки зрения API Google Maps, окружность (также как и многоугольник) является оверлеем (overlay). Для её создания используется класс google.maps.Circle, а однозначно задать её размещение можно с помощью центральной точки — center (объект типа LatLng в котором хранится широта и долгота) и радиуса — radius (в метрах).
Кроме того, в большинстве случаев желательно указать цвет окружности, её заливку и прозрачность. Параметры – fillColor, fillOpacity, strokeColor и strokeOpacity.
В нашем случае посетитель строит окружность с помощью кликов по карте, значит, нужно установить обработчик события click и в нём выполнять настройку и создание окружности.
Обработчик события click получит параметр event, который содержит координаты точки, по которой кликнул посетитель.
После второго клика мы получим координаты второй точки и сможем рассчитать расстояние между ними, т.е. радиус окружности.
Теперь взгляните на код.
function initialize() < . setCenter = true; circleOptions = < fillColor:»#00AAFF», fillOpacity:0.5, strokeColor:»#FFAA00″, strokeOpacity:0.8, strokeWeight:2, clickable:false >google.maps.event.addListener(map, ‘click’, function(event) < if (setCenter) < if (marker != undefined) < marker.setMap(null); >marker = new google.maps.Marker(< position:event.latLng, clickable:false >); marker.setMap(map); circleOptions.center = event.latLng; setCenter = false; > else < //рассчитываем расстояние между точками var radius = distHaversine(circleOptions.center, event.latLng) circleOptions.radius = radius*1000; if (circle != undefined) < circle.setMap(null); >circle = new google.maps.Circle(circleOptions); circle.setMap(map); setCenter = true; > >); >
Нам нужно отличить первый клик от второго. Для этого используем переменную setCenter. Если она равна true, то в данный момент выполняется установка центра окружности.
В переменной circleOptions сохраняем хеш с начальными настройками окружности (цвет, прозрачность и т.п.).
После этого устанавливаем обработчик события click (строка 14).
Логика работы здесь следующая. Если setCenter == true (установка центра окружности), то мы убираем старый маркер (строки 16-18) и создаём новый в указанной точке (строки 19-23).
Затем, сохраняем центр окружности (параметр circleOptions.center) и присваиваем setCenter значение false (т.е. запоминаем, что следующий клик по карте укажет радиус окружности).
После второго клика мы рассчитываем расстояние (функция distHaversine, о ней чуть ниже) и устанавливаем параметр circleOptions.radius.
Затем убираем старую окружность (если она есть) и создаём новую (строки 31-35).
В результате на карте появится новая окружность.
Обратите внимание, что переменные map, circle, circleOptions, setCenter и marker объявлены в глобальной области видимости. Это необходимо, чтобы их значения сохранялись между вызовами обработчиков событий.
Теперь разберём функцию расчета расстояний между точками.
rad = function(x) distHaversine = function(p1, p2) < var R = 6371; // earth’s mean radius in km var dLat = rad(p2.lat() — p1.lat()); var dLong = rad(p2.lng() — p1.lng()); var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(rad(p1.lat())) * Math.cos(rad(p2.lat())) * Math.sin(dLong/2) * Math.sin(dLong/2); var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); var d = R * c; return d.toFixed(3); >
Это реализация формулы гавернсинусов на JavaScript. Взял я её здесь. Формула позволяет определить расстояние между двумя точками на поверхности сферы (длину дуги).
В нашем случае удобно, что приведённая функция правильно работает с объектом LatLng.
И в заключение, пару замечаний о хранении данных.
После кликов посетителя координаты области будут находиться в объекте circleOptions. Их можно передать на сервер, например, с помощью AJAX запроса. Таким образом, при повторном входе посетителя на сайт, можно будет восстановить область.
Вообще, применений этих возможностей масса, главное творчески подойти к их использованию 😉
Источник: yadro.top
Как выделить участок на карте Гугл?
Итак, принцип работы будет следующий. 1) Посетитель кликает по произвольной точке на карте, мы ставим на неё маркер (чтобы удобнее было ориентироваться) и считаем её центром области. 2) Посетитель кликает по любой точке на границе области. Мы рассчитываем расстояние от неё до центра (радиус) и строим окружность.
Как добавить объект в гугл карты?
- Войдите в Мои карты на компьютере.
- Откройте существующую карту или создайте новую. На карту можно добавить до 10 000 линий, фигур или мест.
- Нажмите «Добавить» .
- Выберите слой и нажмите на нужное место. Один слой может содержать до 2000 линий, фигур или мест.
- Введите название места.
- Нажмите Сохранить.
Как найти себя в Google Maps?
- Откройте Google Карты на компьютере.
- Укажите адрес или название места.
- Нажмите на значок поиска .
- Вы увидите результаты поиска в виде небольших красных маркеров и точек.
Как указать свой магазин на карте?
- Откройте Google Карты на компьютере.
- В строке поиска укажите название компании.
- Выберите правильное название компании.
- Нажмите Я владелец компании Перейти к управлению. .
- Выберите удобный вам способ подтверждения и следуйте инструкциям на экране.
Как добавить свой магазин в гугл?
- Откройте приложение «Google Мой бизнес» на устройстве Android.
- Войдите в аккаунт Google, который будет использоваться для управления данными о компании. .
- Введите название компании и другие сведения, затем примите Условия использования.
- Нажмите Продолжить.
Как установить интерактивную карту на сайт?
Карты в правом верхнем углу нужно выбрать раздел «Мои карты». Сразу откроется «Конструктор карт». Там в строке поиска нужно ввести нужный адрес и добавить его на карту.
Как добавить частный дом в гугл карты?
- Откройте Google Карты на компьютере.
- Найдите адрес отсутствующего места.
- Выберите Добавить отсутствующее место.
Как внести изменения в гугл карты?
- Откройте Google Карты .
- Выберите место на карте или найдите его с помощью поиска.
- Нажмите Предложить исправление Изменить название или другие данные.
- Следуйте инструкциям на экране.
Как посмотреть старые карты Google Maps?
- Откройте программу «Google Планета Земля».
- Найдите нужное место на карте.
- Выберите Вид Исторические снимки либо нажмите на значок над окном 3D-просмотра.
Как посмотреть фото дома на карте?
- Открыв Google Карты и введя запрос о месте или адресе.
- Перетащив значок человечка в нужное место на карте.
- Введя запрос о месте или адресе в Google Поиске.
Как гулять по гугл картам на телефоне?
- Откройте приложение «Google Карты» на устройстве Android.
- Нажмите на маркер интересующего вас места.
- Нажмите на название или адрес места в нижней части экрана.
- Прокрутите страницу и выберите фотографию с надписью «Просмотр улиц». .
- После этого в левом верхнем углу экрана нажмите «Назад» .
Источник: fortune-project.ru