Как интегрировать карту с Ionic

Question

Я занимаюсь разработкой приложения для Ionic, в котором я должен показывать пользователю ближайшие НПО.

Я делаю так:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';

declare var google;
let map: any;
let infowindow: any;
let options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
 };

 @Component({
   selector: 'page-home',
   templateUrl: 'home.html'
})
export class HomePage {

@ViewChild('map') mapElement: ElementRef;
map: any;

 constructor(public navCtrl: NavController, public platform: Platform) {
  platform.ready().then(() => {
  this.initMap();
});
}

 initMap() {
  navigator.geolocation.getCurrentPosition((location) => {
  map = new google.maps.Map(this.mapElement.nativeElement, {
    center: { lat: location.coords.latitude, lng: location.coords.longitude 
   },
    zoom: 15
  });

  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
    location: { lat: location.coords.latitude, lng: 
 location.coords.longitude },
    radius: 1000,
    keyword: 'ngo',
    type: ["point_of_interest", "establishment"]


    }, (results, status) => {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {
        this.createMarker(results[i]);
      }
    }
  });
  }, (error) => {
  console.log(error);
}, options);
}

 createMarker(place) {
var placeLoc = place.geometry.location;
var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};
var marker = new google.maps.Marker({
  map: map,
  position: placeLoc,
  icon: image
});
console.log(place);
google.maps.event.addListener(marker, 'click', function () {
  // infowindow.setContent(place.name);
  // infowindow.open(map, this);
  infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +
    'Place ID: ' + place.place_id + '<br>' +
    place.vicinity + '</div>');
  infowindow.open(map, this);
});
}}

Моя проблема в том, что мои функции хорошо работают в браузере, но не в браузере ionic-lab, а также в не сгенерированном мной файле apk.

Я получаю ниже предупреждение / ошибка на вкладке Chrome ионной лаборатории: polyfills.js: 2 Доступ к геолокации был заблокирован из-за политики объектов, примененной к текущему документу.

Answer 1

Геолокация не работает с ионной подачей или ионной лабораторией - вот почему предупреждения.Попробуйте протестировать с ionic build android или ios