Put getCurrentPosition to Mapbox as Marker with Ionic4

时间:2019-05-31 11:46:36

标签: ionic-framework ionic4 mapbox-gl-js ionic-native

I'm building an Ionic-app with Capacitor.

The App contains a Map which I created with Mapbox GL JS v1.0.0.

But I can't figure out how I can get the current location of the App user and put this as an interactive (like updating the coordinates while walking) marker to the map.

The following I have:

<template>
    <div class="ion-page">
        <ion-content class="noScroll">
            <div id="map"></div>
        </ion-content>
    </div>
</template>
<style scoped>
@import url('https://api.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css');
@import url('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.0/mapbox-gl-directions.css');
</style>
<script>
import {
    Plugins,
    Capacitor,
    GeolocationOptions
} from "@capacitor/core";
const {
    Geolocation
} = Plugins;

export default {
    name: "Map",
    data() {
        return {
            location: {},
            longitude: 50.70,
            latitude: 6.10,
            map: null,
        };
    },
    mounted() {
        this.generateMap()
    },
    created() {
        this.getLocation();
    },
    methods: {
        generateMap() {
            var self = this;
            var mapboxgl = require('mapbox-gl/dist/mapbox-gl.js');
            mapboxgl.accessToken = 'pk.123...';
            var location = [(self.latitude), (self.longitude)];
            var map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/streets-v11',
                center: location,
            });
            const geolocate = (new mapboxgl.GeolocateControl({
                positionOptions: {
                    enableHighAccuracy: true
                },
                trackUserLocation: true
            }));
            map.addControl(geolocate)
        },
        async getLocation() {
            console.log("got getLocation event");
            let location = await Geolocation.getCurrentPosition({
                enableHighAccuracy: true,
                timeout: 20000
            });
            console.log("location", location.coords);
            this.location = location.coords.latitude + " " + location.coords.longitude;
            // This gives the Coordinates 
        }
    }
};
</script>

This asks me on iOS if the App may access my location. When accepting, it is not showing any markers on the Map of the current location.

0 个答案:

没有答案