Skip to content

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

@chiqors

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.

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