Skip to content

Error: GeocoderResult[] (Ionic 5 & Vue 3) #368

Description

@chiqors

Hi, first of all. This is my first experience for using this cordova plugin (i am using capacitor v3).

Argument of type '(results: GeocoderResult[]) => null | undefined' is not assignable to parameter of type '(value: GeocoderResult[] | BaseArrayClass<GeocoderResult[]>) => PromiseLike<null | undefined> | null | undefined'.
  Types of parameters 'results' and 'value' are incompatible.
    Type 'GeocoderResult[] | BaseArrayClass<GeocoderResult[]>' is not assignable to type 'GeocoderResult[]'.
      Type 'BaseArrayClass<GeocoderResult[]>' is missing the following properties from type 'GeocoderResult[]': length, concat, join, shift, and 20 more.
    159 |           "lng": coordinates.value.coords.longitude

This error came up, when i decided to use this plugin with Ionic 5 & Vue 3. I have this error, that i couldn't find out the solution.

Here's my package.json (Open this up)
"dependencies": {
    "@capacitor/android": "3.3.2",
    "@capacitor/app": "^1.0.6",
    "@capacitor/core": "^3.3.2",
    "@capacitor/dialog": "^1.0.2",
    "@capacitor/geolocation": "^1.2.0",
    "@capacitor/haptics": "^1.1.3",
    "@capacitor/keyboard": "^1.1.3",
    "@capacitor/local-notifications": "^1.0.9",
    "@capacitor/status-bar": "^1.0.6",
    "@ionic-native/core": "^5.22.0-beta-1",
    "@ionic-native/google-maps": "^5.27.0-beta-20200630",
    "@ionic-native/native-geocoder": "^5.36.0",
    "@ionic/vue": "~5.6.13",
    "@ionic/vue-router": "~5.6.13",
    "cordova-plugin-googlemaps": "^2.7.1",
    "cordova-plugin-nativegeocoder": "^3.4.1",
    "core-js": "^3.8.3",
    "vue": "^3.2.6",
    "vue-router": "^4.0.11"
  },
  "devDependencies": {
    "@capacitor-community/sqlite": "^3.0.0-rc.2",
    "@capacitor/cli": "^3.2.5",
    "@ionic/app-scripts": "^3.2.4",
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^4.15.1",
    "@typescript-eslint/parser": "^4.15.1",
    "@vue/cli-plugin-babel": "~4.5.13",
    "@vue/cli-plugin-e2e-cypress": "~4.5.13",
    "@vue/cli-plugin-eslint": "~4.5.13",
    "@vue/cli-plugin-router": "~4.5.13",
    "@vue/cli-plugin-typescript": "~4.5.13",
    "@vue/cli-plugin-unit-jest": "~4.5.13",
    "@vue/cli-service": "~4.5.13",
    "@vue/compiler-sfc": "^3.0.4",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "copy-webpack-plugin": "^5.1.2",
    "eslint": "~6.8.0",
    "eslint-plugin-vue": "^7.0.0-0",
    "jeep-sqlite": "^1.3.2",
    "typescript": "~4.1.5",
    "vue-jest": "^5.0.0-0",
    "vue-sqlite-hook": "^2.1.4"
  }
Here's my Vue component (Open this up)
<script lang="ts">
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapOptions,
  Geocoder,
  GeocoderResult,
  Marker
} from '@ionic-native/google-maps';
import { defineComponent, ref } from "vue";

export default defineComponent({
.....
setup() {
    // form values
    const origin = ref<string>("");
    const destination = ref<string>("");
    const coordinates = ref<any>({});
    const googleMap = ref<GoogleMap>();

    const loadMap = () => {
    Geocoder.geocode({
        "position": {
          "lat": coordinates.value.coords.latitude,
          "lng": coordinates.value.coords.longitude
        }
      }).then((results: GeocoderResult[]) => {
        if (results.length == 0) {
          // Not found
          return null;
        }
        let address: any = [
          results[0].subThoroughfare || "",
          results[0].thoroughfare || "",
          results[0].locality || "",
          results[0].adminArea || "",
          results[0].postalCode || "",
          results[0].country || ""].join(", ");
      });
    };

    return {
      ....
      // Data
      origin,
      destination,
      ...

      // Methods
      ....
      loadMap,
    };
  }
});
</script>

Sorry, i can't show you the full code, because. it's too long and it's not what i want to ask. But the issue what i am talking is about the error above this code. I could really use some help.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions