Поместите getCurrentPosition в Mapbox как маркер с Ionic4 - PullRequest
Новая
       33

Поместите getCurrentPosition в Mapbox как маркер с Ionic4

0 голосов
/ 31 мая 2019

Я создаю Ionic-приложение с Capacitor.

Приложение содержит карту, которую я создал с помощью Mapbox GL JS v1.0.0.

Но я не могу понять, какЯ могу получить текущее местоположение пользователя приложения и поместить его в виде интерактивного (например, обновления координат при ходьбе) маркера на карту.

Следующее у меня есть: 

<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>

Этоспрашивает меня на iOS, может ли приложение получить доступ к моему местоположению.При принятии, он не показывает никаких маркеров на карте текущего местоположения.

...