geolocation error timeout expired, leaflet library and ionic 3?

0

I ran in the browser and the code of the following link works: link

However when installing on the device I get the following error:

"geolocation error timeout expired" Does anyone know why this happens?

    
asked by joselo 12.11.2018 в 16:48
source

1 answer

0

I could solve it, you must do as is the link that you published PREVIOUSLY and change the code:

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

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

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

 constructor(public navCtrl: NavController) {

 }

 ionViewDidEnter() {
   this.loadmap();
 }

 loadmap() {
    this.map = leaflet.map("map").fitWorld();
    leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      // attributions: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
      maxZoom: 18
    }).addTo(this.map);
    this.map.locate({
      setView: true,
      maxZoom: 10,
      timeout: 30000
    }).on('locationfound', (e) => {
      console.log(e.latitude,e.longitude)
      leaflet.Routing.control({
        waypoints: [
          leaflet.latLng(e.latitude, e.longitude),
          leaflet.latLng(-16.4854728,-68.1983184)
        ], routeWhileDragging:true
      }).addTo(this.map)
    }).on('locationerror', (err) => {
      alert(err.message);
    })
  }
}

And in the html index place this css code:

<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet">
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet-routing-machine.css" />

GREETINGS I HOPE IT SERVES ANOTHER PEOPLE

    
answered by 17.11.2018 в 18:27