Начиная с Google Maps API версии 3.6, теперь карты включают «интересные точки», которые представляют собой серые маркеры, встроенные в карту. Когда пользователь нажимает на этот значок, появляется информация InfoWindow с информацией об этом бизнесе (или в парке, больнице и т.д.).
Их можно отключить, установив стиль. (См. «Пример массива стилей» )
https://code.google.com/apis/maps/documentation/javascript/styling.html
Как только они отключены, исчезают значки, имена и затененные области (для парков и больниц).
До Google Maps API версии 3.6 не было значков; только имена и области.
Вопрос: есть ли способ удалить поведение этих точек интереса по кнопке «click icon to open info»? Я все еще хочу сохранить значки, имена и регионы; только хотите удалить поведение кликов.
Альтернативный вопрос: есть ли способ загрузить/сохранить JavaScript v3.5 API Карт Google для хранения на моем сервере? В настоящее время v3.5 отлично работает для того, что мне нужно. В феврале Google больше не будет предоставлять v3.5 кода и вместо этого будет предоставлять только v3.6, v3.7, v3.8.
Как в Elementor вставить Карты Google? Несколько маркеров на карте
Устранение незначительных версий API Карт Google v3 и использование «замороженной» версии API:
https://code.google.com/apis/maps/documentation/javascript/basics.html#Versioning
Вещи, которые я пробовал и рассмотрел: Добавление прослушивателя событий при щелчке по карте не работает, потому что вместо встроенных маркеров щелкнут. Добавление «clickable: false» в качестве свойства — это выстрел в темноте, без результата. Установка «visiblility: off» удаляет все, оставляя карту с меньшим количеством контента. Установка «видимость: упрощенная» удаляет имя местоположения, хотя поведение onclick все еще присутствует. Нанесение невидимого DIV, накладывающегося на карту, может работать, хотя это позволит удалить возможность панорамирования/масштабирования/перетаскивания карты без увеличения сложности.
Настройка стиля так, чтобы featureType: poi, elementType: labels, visibility: off приведет к отображению областей розовый/серый/зеленый для больниц/кладбищ/парков без маркера или имени. Он возвращает больше цвета на карту.
спросил(а) 2012-01-18T01:52:00+04:00 11 лет, 6 месяцев назад
Источник: progi.pro
Маркеры на Google Maps во Flutter: от простого к сложному
Я — Тим, разработчик в Гудитворкс. Недавно мы делали приложение-гид по ресторанам. Нам было нужно, чтобы на карте отображалась информация о ресторанах, а пользователь мог бы отмечать понравившиеся. Я расскажу, как работать во Flutter с картами, а также стандартными и нестандартными маркерами. В конце каждой части рассказа — ссылка на репозиторий с полным кодом примера.
Подключение карты
В качестве картографической основы я выбрал Google Maps. Для работы с ним во Flutter есть пакет google_maps_flutter. Пакет добавляется как зависимость в файл pubspec.yaml:
Google Maps API: Создание карты, маркеров…
dependencies: . google_maps_flutter: ^2.1.8 .
Чтобы подключиться к картам, понадобится API-ключ: о том, как его получить, подробно написано в документации Maps SDK. Для Android добавляем ключ в файл android/app/src/main/AndroidManifest.xml:
После этого добавляем виджет с картой в файл main.dart:
Стоит обратить внимание на:
- метод _onMapCreated : он вызывается при создании карты и получает в качестве параметра GoogleMapController ,
- параметр initialCameraPosition : определяет первичное позиционирование карты,
- GoogleMapController : управляет картой — позиционированием, анимацией, зумом.
Чтобы карта была красивее, я прописал стили в файле assets/map_style.json. Стилизовать карту удобно сервисом mapstyle.withgoogle.com. Теперь карта выглядит так:
Стандартные маркеры
На карту можно поместить стандартные маркеры. Для этого нужны координаты: в моем случае они, как и другие данные ресторанов — в файле datasource.dart
Метод _upsertMarker создает маркеры:
void _upsertMarker(Place place) < setState(() < _markers.add(Marker( markerId: MarkerId(place.id), position: place.location, infoWindow: InfoWindow( title: place.name, snippet: [. place.occasions, . place.vibes, . place.budget].join(«, «), ), icon: BitmapDescriptor.defaultMarker, )); >); >
Класс infoWindow по тапу показывает пин с информацией о ресторане, а на карту маркеры добавляются с помощью атрибута markers виджета GoogleMap :
Выглядит это так:
Карточки по тапу
Но пина с информацией показалось недостаточно. Хотелось, чтобы была полноценная карточка с фотографией ресторана.
Добавлю переменную для хранения выбранного места и методы для его выбора в _CustomMapState . Карточка будет показываться по тапу на маркер (метод _selectPlace ), а исчезать по тапу там, где маркера нет (метод _unselectPlace ). Карточки подключаются с помощью виджета Positioned :
Теперь карта — с карточками:
Меняющиеся маркеры
Было бы здорово, чтобы пользователь мог отмечать понравившиеся рестораны, и маркер бы от этого менялся. Для этого понадобятся иконки:
Маркеры будут добавляться методом _upsertMarker :
Future _upsertMarker(Place place) async < final selectedPrefix = place.id == _selectedPlace?.id ? «selected_» : «»; final favoritePostfix = _likedPlaceIds.contains(place.id) ? «_favorite» : «»; final icon = await BitmapDescriptor.fromAssetImage( const ImageConfiguration(), «assets/icons/$map_place$favoritePostfix.png», ); setState(() < _markers.add(Marker( markerId: MarkerId(place.id), position: place.location, onTap: () =>_selectPlace(place), icon: icon, )); >); >
Сердечко-лайк ставится методом _likeTapHandler :
void _likeTapHandler() async < if (_selectedPlace == null) return; setState(() < if (_likedPlaceIds.contains(_selectedPlace!.id)) < _likedPlaceIds.removeAt(_likedPlaceIds.indexOf(_selectedPlace!.id)); >else < _likedPlaceIds.add(_selectedPlace!.id); >>); _upsertMarker(_selectedPlace!); >
Метод вызывается в виджете MapPlaceCard :
Когда пользователь выбирает другое место, иконка должна вернуться к прежнему состоянию. Это делает метод _unselectPlace — он снимает выбор с места и обновляет его иконку:
Теперь наша карта выглядит так:
Нестандартные маркеры
Осталось немного — чтобы название ресторана было видно всегда, а не только по тапу. Для этого пришлось сделать отдельную утилиту для рисования маркера utils/custom_marker_drawer.dart
. class CustomMarkerDrawer < . FuturecreateCustomMarkerBitmap(< . >) async < . PictureRecorder recorder = PictureRecorder(); Canvas canvas = Canvas( recorder, Rect.fromLTWH( 0, 0, scaledCanvasWidth, scaledCanvasHeight, ), ); . Picture picture = recorder.endRecording(); ByteData? pngBytes = await (await picture.toImage( scaledCanvasWidth.toInt(), scaledCanvasHeight.toInt(), )) .toByteData(format: ImageByteFormat.png); Uint8List data = Uint8List.view(pngBytes!.buffer); final marker = BitmapDescriptor.fromBytes(data); const double anchorDx = .5; final anchorDy = imageHeight / scaledCanvasHeight; return CustomMarker(marker: marker, anchorDx: anchorDx, anchorDy: anchorDy); >. >