Exploring GPS functionality with Nativescript and Vue.js

Just finished building my Android App using native vue.js.

The geolocation plugin works like a charm on devices with Google Play services enabled, but not so much on those where Google services are turned off.

In need of a module that can enable location tracking on devices without Google services.

Your assistance would be greatly appreciated!

Answer №1

Here's a suggestion:

import * as application from "application";

const PLAY_SERVICES_RESOLUTION_REQUEST = 9999;

...
isGooglePlayServicesAvailable() {
        const googleApiAvailability = com.google.android.gms.common.GoogleApiAvailability.getInstance();
        const resultCode = googleApiAvailability.isGooglePlayServicesAvailable(application.android.context);
        if (resultCode != com.google.android.gms.common.ConnectionResult.SUCCESS) {
            if (googleApiAvailability.isUserResolvableError(resultCode)) {
                apiAvailability.getErrorDialog(application.android.context, resultCode, PLAY_SERVICES_RESOLUTION_REQUEST)
                        .show();
            }
            return false;
        }
        return true;
    }
 ...

This function will check for the availability of play services and prompt the user to install them if needed.

Answer №2

When working with an android app, utilizing LocationManager to set the appropriate provider, whether GPS or NETWORK, is essential. I may not be well-versed in Vue, therefore unable to provide code examples, but given your access to all native APIs in nativescript, you can easily convert it. Example:

LocationManager locationManager = (LocationManager) getApplicationContext().getSystemService(LOCATION_SERVICE);
Location location = locationManager.getLastKnownLocation(LocationManager.NETWORK_PROVIDER);

I have successfully implemented this in a nativescript angular app in the past.

If you need help with location strategies, feel free to check out this resource.

Answer №3

I encountered a similar issue and was able to resolve it by updating the nativescript-geolocation plugin. It turned out that version 3.0.1 did not rely on Google Play services, but it was outdated and incompatible with tns v6. Here is what worked for me:

To fix the problem, I fetched the source code of nativescript-geolocation v3.0.1, made some adjustments, and then included this modified code in my tns v6 project. The process is explained below.

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="573e29261b2d2c2f38351f222e2c">[email protected]</a>:NativeScript/nativescript-geolocation.git
cd nativescript-geolocation
git checkout -b your-branch v3.0.1

Afterwards, I edited the src/geolocation.android.ts file by changing just one line of code:

-    let currentContext = <android.app.Activity>androidAppInstance.currentContext;
+    let currentContext = <android.app.Activity>androidAppInstance.context;

Finally, I added the dependency to my project using the following command:

tns plugin add /path/to/nativescript-geolocation/src

For guidance on how to utilize this plugin in version 3.0.1, refer to the demo/app/main-page.ts file in the linked repository.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using D3.js for Page Navigation

For my D3 bar charts, I am working with a substantial amount of JSON data obtained from an API. My goal is to display only 10-20 bars at a time. Would it be possible to implement pagination using D3 itself, or should I explore alternative methods (such a ...

Tips for optimizing the use of JS promises?

I'm encountering issues with implementing promises in JavaScript. There are 3 asynchronous functions that rely on each other: The functions are named func1, func2, and func3 respectively. func1 produces a single result that func2 requires. func2 a ...

Utilizing child component HTTP responses within a parent component in Angular: a comprehensive guide

As a newcomer to Angular, I find myself struggling with http requests in my application. The issue arises when I have component A responsible for retrieving a list of IDs that need to be accessed by multiple other components. In component B, I attempted t ...

What is the method to implement an invisible filter in AngularJS?

When I enter text into the input field in a list view, it filters my list based on the visible username. For example, typing "pa" will display only one row that matches the filter. However, when I type in the "keyword filter" input field, which is not visi ...

React app (storybook) experiencing loading issues with @font-face

I am struggling to load custom fonts from a local directory. Can someone provide assistance? Below is the code I am currently using: @font-face { font-family: 'My Custom Font'; src: url('./fonts/MyCustomFont.eot'); src: url(&apo ...

Creating an Interactive and Engaging 3D Experience on Facebook with the Power of Javascript API

Looking for suggestions on a 3D API in JavaScript that can be used to create immersive applications on Facebook. Is there something similar to this one: ? Appreciate any insights. ...

Troubleshooting: Scroll event malfunction in framework7 with Vue framework

Currently implementing framework7 in my project and facing an issue where I want a button to start floating after the user scrolls past a specific element. I have tried various methods to trigger the scroll event but none seem to be working. Even attem ...

Using Vue.js: Executing a method in one component from another

Currently working with Vue.Js version 2 and looking to achieve a functionality where I can call the method c1method from component1 within the method c2method in component2 in order to reload data post submission. Vue.component('component1', { ...

Is it possible to close a MongoDB connection using a different method other than the one mentioned in this function?

I am facing a challenge with uploading a substantial data set from my node.js application to a mongodb. The process involves running a for loop to fetch each result. Initially, I established the connection to the MongoDB within every iteration of the loop, ...

Issue: Entering data in the input field for each row results in the same value being copied to the qty field

Currently, I have a field where users can enter the quantity for each row. Everything was functioning properly until I decided to add another input field for the pick option. Unfortunately, now it seems that whatever is entered in one field gets duplicated ...

Resizable <textarea> with unique geometries

Is there a way to create a design for a textarea in the shape of a speech bubble or thought bubble, similar to what you might see in a comic? Ideally, I would like it to expand as text is entered into it. UPDATE: Hello everyone! Apologies for the earlier ...

The created function in VueJS may sometimes result in an undefined outcome

I recently started a project with VueJs where I encountered an issue while making a GET request using the Axios library. The data was returned as expected, but I faced difficulties calling the loadUsers function inside mounted. Here is my code snippet: ex ...

Having trouble with Vue js not displaying VdtnetTable? Let's troubleshoot what could be causing this

[Vue warn]: Error in render: "TypeError: Object(...) is not a function" found in ---> <VdtnetTable> <App> at resources/js/kodie/properties/Table.vue <Properties> at resources/js/kodie/properties/index.vue ...

Choose specific elements based on their attribute within a class, and then either apply or remove a class

I have a project where I need to store the data information of each element in my navigation menu when a button is clicked. This project is a one-page website with two levels of navigation: Main menu Button at the bottom of each "page" Currently, I hav ...

Validate the provided input against the value stored in the JSON file

Currently utilizing BootstrapVue. I have a scenario where I need to autofill the first b-form-input from a query string. Following that, I am required to enter an ID in another b-form-input and validate if it matches the ID stored in my json file (associa ...

Achieving Vertical Centering of Text in Bootstrap 5 Buttons with Flex Box to Prevent Overlapping Icons

How can I prevent the text on a Bootstrap 5 button with horizontally and vertically centered text, along with a right aligned icon, from overlapping when it wraps? Additionally, how do I ensure that the icon stays vertically centered when the button text w ...

Deleting individual word property in jQuery

I have a Bootstrap 4 button on my webpage. According to w3schools, including a button as shown below will make it appear disabled: <button type="button" class="btn btn-primary" disabled>Disabled Primary</button> I want the button to be disabl ...

JavaScript and Node.JS tutorial: Pause execution until a folder is copied, then proceed to modify its files using asynchronous functions and await

I am currently developing a node.js application that involves copying a directory and then making modifications to the files within it. However, I have encountered an issue where my code attempts to edit the files before the copying process is fully comple ...

How can I automatically scroll to an anchor element once CSS animation has finished

I am currently working on a CSS animation that looks like this: @-webkit-keyframes flip { 0% {opacity:1;} 100% {opacity: 0;} //This could be 90% //And here could be frame for 100% which would scroll it down. } #headercover { -webkit-animation-name ...

Requesting data from a JSON array of objects leads to an undefined result

<!DOCTYPE html> <html> <head> <title>Practice</title> </head> <body> <script> const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd7 ...