ionic-team / ionic-team/ionic-native-google-maps

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

オープン
#368 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
TypeScript
スター
215
フォーク
119
PR マージ指標
30日以内にマージされた PR はありません

説明

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

```typescript
Argument of type '(results: GeocoderResult[]) => null | undefined' is not assignable to parameter of type '(value: GeocoderResult[] | BaseArrayClass) => PromiseLike | null | undefined'.
Types of parameters 'results' and 'value' are incompatible.
Type 'GeocoderResult[] | BaseArrayClass' is not assignable to type 'GeocoderResult[]'.
Type 'BaseArrayClass' 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)

```json
"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)

```vue

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,
};
}
});

```

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.

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

Start with the Geocoder.geocode call in the shown Vue component and inspect the TypeScript declaration for its callback value, especially the GeocoderResult[] | BaseArrayClass union. Reproduce the error with the listed package versions using the project's TypeScript check. Done means the intended geocoding callback type is compatible and the component compiles without this error.

索引モデルが issue の本文から書いたものです。

評価

技術スタック
typescript
領域
mobile
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
25/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。