Добавление ночного наложения в API карт Google - PullRequest
Новая
       7

Добавление ночного наложения в API карт Google

0 голосов
/ 29 июня 2018

У меня есть следующий бит HTML в моем проекте Angluar 

<agm-map ngDraggable [latitude]="latitude" [longitude]="longitude" >
  <agm-marker *ngFor= "let post of locations.results[0].events" [latitude]="post.asnLatitude" [longitude]="post.asnLongitude" [label] ="post"> </agm-marker>
</agm-map>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=013d0299e34c52b6dfb87711021b661295b918ee&callback=initMap"
  type="text/javascript"></script>

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

возможно, добавив что-то вроде: 

<script>nite.init(map)</script>

сделает трюк

где map как-то ссылается на элемент.

Это показывает мою карту Google вместе с моими точками широты и долготы. Я хотел бы добавить наложение с днем ​​и ночью на карте, которую я пытался использовать с помощью nite-overlay от github здесь , но это не для html, а для javascript. У меня вопрос, есть ли что-то, что я могу добавить в html, возможно, с наложением agm, чтобы на карте отображалось положение дня и ночи. Обратите внимание, что этот html будет обновляться каждые 15 секунд из-за изменений широты и долготы. Поэтому обновление значения дня не должно быть проблемой. Thx

Edit: я в порядке с добавлением вещей в мои component.ts, но я хотел бы продолжать использовать компоненты для карты с lat и long.

Ответы [ 2 ]

0 голосов
/ 10 июля 2018

Ночное наложение с использованием предложенных вами js (т. Е. https://github.com/rossengeorgiev/nite-overlay) может быть успешно использовано с agm-map с использованием (mapReady)="mapReady($event)".

Помимо необходимого шага для использования agm-map (я предполагаю, что вы можете нарисовать карту на своей странице, используя agm-map), убедитесь, что вы установили @types/googlemaps

npm install --save @types/googlemaps

И, что вы скопировали файл nite-overlay.js в вашу папку src и включили его в файл .angular-cli.json следующим образом. 

...
"scripts": [
        "nite-overlay.js"
      ],
...

Ниже приводится рабочий код.

map.component.ts 

import { Component, OnInit, NgZone } from '@angular/core';
import { MapsAPILoader } from '@agm/core';
import {} from '@types/googlemaps';

declare var google: any;
declare var nite: any;

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

  lat: number = 26.288644;
  lng: number = 73.021302;
  zoom = 4;

  m: Marker = {lat:this.lat, lng:this.lng};


  constructor(
    private loader: MapsAPILoader,
    private zone: NgZone
    ) { }

  clickedMarker(label: string, index: number) {
    console.log(`clicked the marker: ${label || index}`)
  }

  mapClicked($event: any) { 
    let m: Marker = {lat:$event.coords.lat, lng:$event.coords.lng};
    this.m = m;
    this.getAddress(m.lat, m.lng, this.setAddress.bind(this));
  }

  markerDragEnd(m: Marker, $event: MouseEvent) {
    console.log('dragEnd', m, $event);
  }

  mapReady($event: any) { 
  nite.init($event);

  }

  ngOnInit() {

  }

}

// just an interface for type safety.
interface Marker {
    lat: number;
    lng: number;
    label?: string;
    draggable?: boolean;
}

map.component.html 

<agm-map [latitude]="lat" [longitude]="lng" [scrollwheel]="false" [zoom]="zoom" (mapClick)="mapClicked($event)" (mapReady)="mapReady($event)">
      <agm-marker *ngIf="m" [latitude]="m.lat" [longitude]="m.lng" ></agm-marker>
    </agm-map>

ОБНОВЛЕНИЕ, КАК ИМПОРТИРОВАТЬ JS В Angular 6

Мой приведенный выше рабочий пример кода использует angular 5. Но проекты CLI в angular 6 и выше используют angular.json вместо .angular-cli.json для сборки и конфигурации проекта.

Ref - Как использовать внешние файлы JS в Angular 6 , как использовать внешний файл JS в Angular 6.

0 голосов
/ 09 июля 2018

Вы можете использовать пакет nite, сначала вам нужно будет получить нативный объект google maps от agm, как это, в ваш component.ts: 

constructor(private _mapsWrapper:GoogleMapsAPIWrapper){
    _mapsWrapper.getNativeMap().then((map: mapTypes.GoogleMap) => {
      // Here you can use the map object with the nite package
      nite.init(map);
    });
  }

PS: не забудьте операторы импорта: 

import { GoogleMapsAPIWrapper } from '@agm/core';
import * as mapTypes from '@agm/core/services/google-maps-types';
...