Расширьте библиотеку Google Map в Angular 7+

Все, что вам нужно знать о Google Map в Angular

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

Пример, использованный в этой статье, основан на статье Джоселин Кеунг. Это самый понятный учебник привет, мир, который я нашел при интеграции Google Maps в Angular.

Чтобы продемонстрировать, как расширить исходную библиотеку Google Map, я добавил простую функцию «Очистить маркеры» поверх ее примера.

Добавить / удалить маркер

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

const marker = new google.maps.Marker({
   position: new google.maps.LatLng(35.2271, -80.8431),
   map: this.map
});
marker.setMap(this.map);

Очистить маркер не так просто, как добавить его, поскольку он не предоставляется из коробки в Google Map Api v3 из-за соображений производительности. В официальных примерах Google Map рекомендуется хранить маркеры в массиве глобальных переменных. При очистке / удалении маркеров выполните цикл по массиву и вызовите «.setMap (null)» для данного объекта маркера. Основные шаги показаны ниже.

Расширить библиотеку карт Google

Однако приведенное выше решение не является идеальным. Если есть несколько экранов, требующих интеграции с Google Map, код придется дублировать везде. Нам нужен более эффективный способ справиться с этим.

Лучшее решение - добавить эту функцию в библиотеку Google Map, расширив ее, чтобы код можно было хранить в одном месте.

Чтобы расширить библиотеку, первое, что нам нужно, это объявить новый интерфейс в определении типа. В примере Джоселин «Hello world» есть файл определения типа «index.d.ts» с объявлением модуля, как показано ниже, что позволит компилятору angular работать.

declare module 'googlemaps';

Однако файл определения типизации библиотеки Google Map использует пространство имен вместо модуля, поэтому для его расширения нам необходимо расширить пространство имен.

Объявление интерфейса

Чтобы добавить новый файл, я использовал custom.d.ts:

declare global {
   namespace google.maps {
    interface Map {
      markers: Array<any>;
      clearMarkers(): void;
    }
    interface Marker {
      _setMap(map: Map): void;
      setMap(map: Map): void;
     }
   }
}
export default global;

Нам также необходимо добавить конфигурацию, позволяющую IDE распознавать новую типизацию. В файл tsconfig.json я добавил следующее

"typeRoots": [
   "node_modules/@types",
   "src/app"
]

Обратите внимание, что «src / app» - это путь к файлу «custom.d.ts» в этом примере, вы должны переместить его в правильный путь к папке в реальном проекте.

Выполнение

Новый интерфейс реализован в custom-map.ts.

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

this.map.clearMarkers();

Теперь вы можете добавить свою собственную функцию в мощную библиотеку Google Map API.

Надеюсь, эта статья поможет. Вы можете найти полный исходный код примера здесь. Чтобы примерный проект работал правильно, вам необходимо получить ключ API Google Map и добавить его в URL-адрес скрипта в index.html.

Удачного программирования!

Обновление: 13-фев-2019

Angular 9: GoogleMap теперь является угловым компонентом

Компонент Google Map был представлен в Angular 9, что значительно упрощает его использование.

<google-map></google-map>

Репозиторий нового компонента на Github находится здесь.

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