Добавление в маркер для представления текущей позиции пользователя - PullRequest
Новая
       4

Добавление в маркер для представления текущей позиции пользователя

1 голос
/ 02 марта 2020

В настоящее время я использую angular и ioni c 4 для создания интерактивной карты Google Map. В настоящее время у меня есть несколько маркеров, отображаемых на карте, но у меня есть небольшой пердеж в попытке выяснить, как добавить геолокацию и маркер для представления моего местоположения. На данный момент у меня реализован код геолокации документов от ioni c, но он, похоже, ничего не делает. Однажды я получил геолокацию, чтобы показать, что она сломала код для других маркеров на карте. Мне не удалось реализовать одновременно несколько маркеров карты + геолокации. Любая помощь будет высоко ценится. 

import { Geolocation } from '@ionic-native/geolocation/ngx';
import { MarkerDataService } from '../service/marker-data.service';
declare var google;

@Component({
  selector: 'app-all-marker',
  templateUrl: './all-marker.page.html',
  styleUrls: ['./all-marker.page.scss'],
})
export class AllMarkerPage implements OnInit {
  @ViewChild('map',{static:true}) mapContainer: ElementRef;
  map: any;
  markerData = [];

  constructor(
    private geolocation: Geolocation,
    private markerSerivice: MarkerDataService) { }

  ngOnInit() {

    this.geolocation.getCurrentPosition().then((resp) => {

     }).catch((error) => {
       console.log('Error getting location', error);
     });

     let watch = this.geolocation.watchPosition();
     watch.subscribe((data) => {

     });

    this.markerData = this.markerSerivice.getMarkers();
    this.displayGoogleMap();
    this.getMarkers();
  }

  displayGoogleMap() {
    const latLng = new google.maps.LatLng(52.175471, -7.162739);

    const mapOptions = {
      center: latLng,
      disableDefaultUI: false,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    this.map = new google.maps.Map(this.mapContainer.nativeElement, mapOptions);
  }

  getMarkers() {
    // tslint:disable-next-line:variable-name
    for (let _i = 0; _i < this.markerData.length; _i++) {
      if (_i > 0) {
        this.addMarkersToMap(this.markerData[_i]);
      }
    }
  }

  addMarkersToMap(marker) {
    const position = new google.maps.LatLng(marker.latitude, marker.longitude);
    const fishingMarker = new google.maps.Marker({ position, title: marker.name });
    fishingMarker.setMap(this.map);
  }
}

1 Ответ

3 голосов
/ 04 марта 2020

Вы можете использовать функцию Geolocation HTML5 вашего браузера, чтобы показать географическое местоположение c пользователя или устройства на карте Google. Пример реализации можно найти в документации Maps JavaScript API.

Это можно интегрировать с Ioni c 4. Например, для вашей функции displayMap() вы можете просто добавить эти : 

navigator.geolocation.getCurrentPosition(function(position) {
    var pos = {
      lat: position.coords.latitude,
      lng: position.coords.longitude
    };
    console.log(pos);
    var marker = new google.maps.Marker({
      position: pos,
      map: map,
    });
    map.setCenter(pos);
  });

Надеюсь, это поможет!

...