Можно ли в angular2 использовать google/yandex maps без плагинов?

Question

[zlodiak]

Скажите пожалуйста, возможно ли в angular2 использовать картографические сервисы от google/yandex без установки модулей типа AGM? Если можно, то как?

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

Answer 1

[Eugene Kubesh]

Конечно можно! Для начала для повышения общей грамотности давай не будем писать Angular 2, 3, 4, 15. Сейчас есть всего 2 Angular фреймворка, AngularJS (ветка 1.x) и Angular(ветка 2+). Твой вопрос не требует привязки к конкретной версии Angular.

Собственно сам Angular тебя ни к чему не обязывает. Ты можешь делать что угодно и как тебе угодно и это будет работать, этим то и отличается он в большинстве своем от AngularJS.

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

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

Но Angular никаких ограничений на тебя не накладывает, просто потрать время, пробегись по доке AGM, вдруг оно того стоит? ;)

Comments

[zlodiak]

Всё же меня устроили бы нативный google maps. Но не получается его подключить хотя бы в виде helloworld. Я создаю angular-проект через angular cli и затем добавляю следующий код:

app.component.html:

<div id="map"></div>  
<script src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap"
    async defer></script>

app.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

	ngOnInit() {
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363, lng: 131.044}
  });

  renderMarkers();

  map.addListener('click', function(e) {
    var lat = e.latLng.lat();
    var lng = e.latLng.lng();    
    var id = 'id_' + Date.now() + lat.toFixed(2) + lng.toFixed(2);
    generateMarker(lat, lng, id);    
  });  
}

function getMarkersFromLocalStorage() {
  return localStorage.markers ? JSON.parse(localStorage.markers) : {};
};

function addMarkerToLocalStorage(lat, lng, id) {
  var markers = getMarkersFromLocalStorage();
  markers[id] = {
    lat: lat, 
    lng: lng
  };
  localStorage.markers = JSON.stringify(markers);
};

function removeMarkerFromLocalStorage(id) {
  console.log('removeMarkerFromLocalStorage');
  var markers = getMarkersFromLocalStorage();
  delete markers[id];
  localStorage.markers = JSON.stringify(markers);
};

function renderMarkers() {
  var markers = getMarkersFromLocalStorage();  

  for(prop in markers) {
    generateMarker(markers[prop].lat, markers[prop].lng, prop);
  };
};

function generateMarker(lat, lng, id) {  
  var marker = new google.maps.Marker({
    position: {lat: lat, lng: lng},
    map: map
  }); 
  marker.id = id;
  addMarkerToLocalStorage(lat, lng, id);

  marker.addListener('rightclick', function(e) {
    var m = this;
    console.log(e, m['id']);    
    removeMarkerFromLocalStorage(m['id']);
    this.setMap(null);
  });   

};		
	}
  
}

В результате в браузере по адресу localhost:4200 я вижу белый экран. При этом консоль браузера не выводит никаких сообщений.

НО сам по себе этот код рабочий. Вот jsfiddle