Google maps api работаем с информационными окнами


Показать информационное окно

Javascript
11.07.2020, 20:25

Создать окно произвольного размера, скрыть окно, показать окно, удалить окно.
Создать окно произвольного размера, скрыть окно, показать окно, удалить окно. Для создания окна.

Информационное окно
Как сделать, чтобы когда наводишь на элемент формы появлялась такое окно(смотреть фото в красной.

Не даёт вставить файл информационное окно
Всем доброго времени суток. Есть такая проблема, при копировании файла из shelllistview и вставке.

Google Maps API v3: пользовательские стили для информационного окна

Я пробовал многие примеры из справочника по картам Google и из других вопросов, связанных со стековым потоком, но мне не удалось получить пользовательские стили в моем информационном окне.

Я использую что-то очень похожее на то, что было сделано в этом другом ответе stackoverflow

Здесь это работает /редактируется: http://jsfiddle.net/3VMPL/

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

4 ответа

Обновление : обратитесь к этому ответу , чтобы узнать о состоянии переноса исходного кода инфобокса в GitHub.

Как насчет использования плагина Infobox, а не обычного Infowindow? Я разместил полный пример в примере jsfiddle здесь . Главное, что есть в информационном блоке, это то, что вы можете создать свой информационный блок в html вашей страницы, предоставляя вам полный контроль над тем, как он выглядит, используя css (и некоторые опции javascript, если это необходимо). Вот HTML-код для инфобокса:


Идея здесь в том, что div «infobox-wrapper» будет скрыт (т. е. display: none в вашем css), а затем в вашем javascript вы инициализирует объект Infobox и даст ему ссылку на ваш «информационный блок» (внутри скрытой оболочки) следующим образом:

Это всего лишь пример некоторых доступных опций. Единственный обязательный ключ — content — ссылка на информационный блок.

И чтобы открыть информационное окно:

И для дальнейшей демонстрации гибкости информационного блока этот jsfiddle имеет изображение с css переход как «информационное окно».

И последний совет: Не используйте класс «infobox» в своем html. К сожалению, он используется плагином, когда инфобокс действительно генерируется.

Если вы не можете использовать информационный блок и вам нужно настроить информационное окно, вы можете получить к нему доступ с помощью css. Это не красиво, в значительной степени зависит от селекторов psuedo first: child /last: child и, очевидно, от того, решит ли когда-нибудь Google изменить HTML-структуру своей карты.

Надеюсь, что приведенный ниже css может помочь кому-то еще в безвыходном положении, когда им приходится иметь дело с информационным окном.

Вы можете стилизовать информационное окно, стилизовав класс .gm-style-iw .

Google Maps API несколько маркеров с информационными окнами

просто получать мои зубы затонувших в Google Maps API.

Я пытаюсь построить пару маркеров на карте. Готово. Однако я рециркуляция переменный / объекта для каждых маркеров.

Сначала я создать маркер с опциями и добавить к карте, а затем взять те же переменные маркера, перепрофилировать его, и добавить его в карту еще раз. Это действительно производит два уникальных маркеров с отдельными тегами заголовков.

Я хочу, чтобы отобразить информационное окно для каждых маркеров, но я в сомнении относительно того, что это лучший способ сделать это. Я также вижу флаг неприятности выскакивают с назначением щелчка события каждого маркера, так как я использую ту же переменную, чтобы добавить каждый маркер, я не знаю, как добавить его щелчок событие уникальным маркеров (по имени, как имя является то же самое для обоих, так как она никогда не получает какой-либо идентификатор?)

Для создания информационного окна, я думал использовать один переменный / объект, чтобы держать информационное окно, и затем перепрофилирование его с новым текстом в каждом случае маркером мыши.


Вопросы, которые у меня есть следующие:

1: Должен ли я использовать отдельный уникальный переменный / объект для каждых маркеров (накладных расходы?), Если нет, то как я могу определить его щелчок событие.

2: Это нормально перепрофилировать (переназначить) информацию об объекте окна с новым текстом перед его совал, или я должен создать уникальное информационное окно для каждого маркера?

Я немного n00b Java, так что любая помощь будет очень цениться.

Вы на правильном пути. Есть один объект InfoWindow так же, как у вас есть один объект маркера. Тогда содержание меняется в зависимости от информационного окна которой маркер, нажмите кнопку. Одна вещь, чтобы следить за (это происходит, если вы создаете маркеры внутри цикла), является то, что опасность заключается в том, что все infowindows в конечном итоге с содержанием последнего. Итак, давайте создадим новую функцию, которая обновляет содержимое.

Кроме того, как в сторону, вы не должны вызывать функцию setMap () на ваших объектах маркеров, вы можете просто указать атрибут карты в настройках вы проходите, когда вы создаете маркеры.

Тогда новая функция:

создать глобальный объект InfoWindow. var infowindow = new google.maps.InfoWindow();

и добавить слушатель для глобальных маркеров.

Закройте все информационные окна в Google Maps API v3

Я занят сценарием, который создаст на моем веб-сайте холст Google Maps с несколькими маркерами. Я хочу, чтобы при нажатии на маркер открывалось информационное окно. Я сделал это, и код на данный момент:

Это работает на 100%. Но теперь я хочу, чтобы, когда одно информационное окно открыто, а вы хотите открыть второе, первое автоматически закрывается. Но я не нашел способ сделать это. InfoWindow. близко(); не поможет Есть ли у кого пример или решение этой проблемы?

10 ответов

infowindow является локальной переменной, и окно недоступно во время закрытия ()


Объявите глобальные переменные:

В intialize используется метод карты addEvent :

Для циклов, которые динамически создают infowindows , объявите глобальную переменную

, а затем в вызове функции addListener (который находится в цикле):

У меня был динамический цикл, который создавал infowindows и маркеры в зависимости от того, сколько было введено в CMS, поэтому я не хотел создавать новый InfoWindow() при каждом щелчке по событию и связывать его с запросами, если таковые возникли. Вместо этого я попытался узнать, какая конкретная переменная infowindow для каждого экземпляра выйдет из заданного количества расположений, которые у меня были, и затем попросил Карты закрыть все из них, прежде чем он откроет правильную.

Мой массив локаций назывался локациями, поэтому в PHP, который я установил до , фактическая инициализация карт для получения имен моих переменных infowindow была:

Затем после инициализации карты и т. Д. В скрипте у меня был цикл PHP foreach , создающий окна динамической информации с использованием счетчика:

Итак, прежде чем я вызвал весь скрипт карты, у меня был массив с именами, которые, как я знал, должны были быть выведены при создании InfoWindow() , например infowindow0, infowindow1, infowindow2, etc.

Затем, в событии click для каждого маркера, цикл foreach проходит и говорит закрыть все из них, прежде чем выполнить следующий шаг их открытия. Получается так:

Просто другой способ делать вещи, я полагаю. , , но я надеюсь, что это кому-то поможет.

Вопрос по google-maps-api-2, javascript, google-maps &#8211 Google Maps API открывает несколько информационных окон по умолчанию

Возможно ли открыть все информационные окна по умолчанию. Я попробовал следующее, но это нет работа:

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

Обновить: А не было»Когда я написал это, я заметил, что этот вопрос помечен google-maps-api-2 , Этот ответ будет работать только дляGoogle Maps Javascript API v3,устаревший API Карт Google Javascript v2, поддерживает только одно информационное окно одновременно.


Добавление нескольких маркеров с помощью информационных окон (Google Maps API)

В настоящее время я использую следующий код для размещения нескольких маркеров на карте Google с помощью их API.

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

Здесь, на SO, множество вопросов, подобных моему. На самом деле сделать это куча вопросов :-)

Решение моей проблемы довольно простое: просто поместите прослушиватель щелчков в (анонимную) функцию.

Однако я не понимаю, почему мое решение не работает (сохранение маркеров и информационных окон в массивах вместо одной переменной).

Итак . Я не знаю, как получить решение, как заставить его работать с какой-то функцией, чтобы заключить слушателя (хотя он должен работать, еще не проверял, но будет), но я хочу знать причину, почему не будет работать, если я вместо этого добавлю маркеры и информационные окна в массивы.

Javascript имеет языковую структуру, которая называется «замыкания». Замыкания — это функции (например, функция () <>, которую вы объявляете выше для работы с прослушивателем щелчков), которые захватывают ссылки на внешние переменные.

Существует множество ресурсов, которые объясняют их лучше, чем я, и я предлагаю вам проконсультироваться, но вот моя лучшая попытка:

В этом блоке здесь:

Поскольку «ключ» уже определен как внешняя переменная, функция будет захватывать ссылку на эту переменную. Итак, где вы ожидаете:

Javascript вместо этого будет интерпретировать это как:

Когда вы нажимаете на маркер, он ищет «ссылку на ключ», чтобы увидеть текущее значение ключа. Поскольку этого, вероятно, не произойдет до тех пор, пока ваш цикл не завершится, ключ будет равен любому последнему ключу в вашем объекте data.markers. И оно будет равно этому значению для КАЖДОГО прослушивателя кликов, который вы добавили.

Как вы указываете, решение состоит в том, чтобы обернуть это в анонимную функцию, чтобы Javascript оценивал значение «ключа» во время добавления прослушивателя щелчков.


Это прекрасно работает для меня! Просто добавьте новое свойство к маркерному объекту, это свойство содержит объект infowindow.

Есть немного более простой способ сделать это. Вы можете добавить пользовательский атрибут в свой маркер (индекс информационного окна) и ссылаться на него в функции обратного вызова. Пример ниже:

Это одно довольно хорошее объяснение с решением с демонстрационной страницей.

Google Map API v3

Просто закрыть информационное окно?

Попытка просто закрыть инфоузел?

У меня уже есть массив маркеров, поэтому что-то вроде этого было бы хорошо. Благодаря

8 ответов

С v3 API вы можете легко закрыть InfoWindow с помощью InfoWindow.close() . Вам просто нужно сохранить ссылку на объект InfoWindow , который вы используете. Рассмотрим следующий пример, который открывает InfoWindow и закрывает его через 5 секунд:

Если у вас есть отдельный объект InfoWindow для каждого Marker , вы можете захотеть добавить объект InfoWindow в качестве свойства ваших объектов Marker :

Затем вы сможете открыть и закрыть это InfoWindow следующим образом:

То же самое относится, если у вас есть массив маркеров:

Или вы можете совместно использовать/повторно использовать один и тот же объект infoWindow. Для справки см. Этот google demo.


Кастомизация infoWindow на картах гугл

Поп-ап на картах гугл, объект google . maps .I nfoWindow, привлекателен возможностью вставки в него собственного HTML контента. Но кастомизация внешнего вида ограничена. По сути вы можете применить стили только к внутреннему содержимому, прописывая стили для контейнера .gm-style-iw.

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

Вот что мы имеем по-дефолту от Гугл.

На следующем слайде выделен прямоугольник, стили которого мы контролируем.

Крестик для закрытия окна хоть визуально и расположен внутри области, на самом деле не является частью контента выделенного контейнера.

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

Потому вместо InfoWindow попробуем запрограммировать собственное кастомное наложение.

Если хотите разобраться во всем самостоятельно, то начните с этого раздела помощи Google.

Собственное наложение для карты Гугл.

Нам не хватает класса в контейнере, который изображает InfoWindow. Добавив его, мы сможем применить нужные стили.

И давайте также покажем треугольничек стрелки окна, например, не внизу, а справа от окна.

Меня устраивает белый цвет заднего фона, но поменяв стили, я могу задать и другой цвет для всего контейнера:

Кастомный OverlayView


Я взял за начальный вариант, тот код который предлагает Гугл в своём туториале (см. ссылку выше). Мне нужно было передать следующие данные в мой Overlay:

google maps api несколько маркеров с информационными окнами

только что мои зубы погрузились в API карт Google.

Я пытаюсь построить пару маркеров на карте. Готово. Однако я перерабатываю переменную/объект для каждого маркера.

Я изначально создаю маркер с параметрами и добавляю к карте, затем беру одну и ту же переменную маркера, переставляю ее и снова добавляю к карте. Это создает два уникальных маркера с отдельными тегами заголовка.

Я хочу показать информационное окно для каждого маркера, но сомневаюсь в том, что это лучший способ сделать это. Я также вижу, что на каждом маркере появляется значок ошибки, который присваивает событиям щелчка, поскольку я использую одну и ту же переменную, чтобы добавить каждый маркер, я не уверен, как добавить его событие click к уникальным маркерам (по имени, так как имя то же самое для обоего, так как она никогда не получает какой-либо идентификатор?)

для создания информационного окна, я думал использовать один переменный/объект, чтобы держать информационное окно, и затем перепрофилирование его с новым текстом в каждом маркере щелкните событие.

Вопросы, которые у меня есть следующие:

1: Должен ли я использовать отдельный уникальный переменной/объекта для каждого маркера (накладные расходы?), Если нет, то как я могу определить его щелчок событие.

2: Прекрасно ли перекомпоновать (переназначить) объект информационного окна с новым текстом перед его всплыванием или создать уникальное информационное окно для каждого маркера?

Я немного Java n00b, поэтому любая помощь будет очень признательна.

Создан 02 фев. 12 2012-02-02 12:03:26 Louis van Tonder

Создание сайтов в Москве

Google Maps API Работаем с информационными окнами

Информационное окно (балун)– является отличным способом отображения информации о конкретной точке или объекте.

Существует несколько видов информационных окон.

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

1. Основное информационное окно

Для открытия окна с информацией существует специальный класс GMarker.openInfoWindowHTML()

Он принимает два параметра: первый, текст который появится в информационном окне, а второй, необязательный, содержит опции для настройки информационного окна.

Пример основного информационного окна.

Посмотреть пример в действии.

2. Информационное окно с закладками

Для создания информационного окна с закладками служит класс GInfoWindowTab.

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

Пример информационного окна с закладками.

Посмотреть пример в действии.

3. Информационное окно с миникарой


Существует возможность показать миникарту над районом, в котором расположен маркер.

За это отвечает функция showMapBlowup().

Она имеет два параметра: InfoWindowOptions.zoomLevel и InfoWindowOptions.mapType

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

Пример основного информационного окна с миникарой.

Посмотреть пример в действии.

Добавим параметры для миникарты.

Зададим уровень масштаба миникарты – 15, тип – спутниковый снимок (G_SATELLITE_3D_MAP).

Посмотреть пример в действии.

4. Максимальное информационное окно.

Если у Вас много информации для размещения в окне, необходимо разрешить пользователю увеличивать информационное окно до максимального размера.

Это делается с помощью параметров maxContent и maxTitle.

После их задания появиться кнопка для развертывания окна.

Пример основного информационного окна с миникарой.

Илон Маск рекомендует:  Что такое код iswindow
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL