使用 mapbox 作为 VGeosearch 的提供者

如何解决使用 mapbox 作为 VGeosearch 的提供者

我尝试使用 mapBox 作为 VGeosearch

的提供者

我的用例是当用户是中国人时，我需要使用 mapBox 实例化地图（用于坐标规则），在其他情况下使用 Google 地图，所有这些都使用 Vue2-leaflet

所以，我的代码：

Vue 模板：

<template>
  <LMap>
    <LTileLayer :url="isChinese ? mapBoxUrl : googleMapsUrl" />

    <Vue2LeafletGoogleMutant
      v-if="!isChinese"
      :apikey="appParameters.googleMapKey"
      :lang="appParameters.language"
    />

    <VGeosearch
      id="geosearch"
      :options="{
        provider: geosearchOptions.provider,style: 'bar',showMarker: geosearchOptions.showMarker,autoClose: geosearchOptions.autoClose,searchLabel: geosearchOptions.searchLabel,}"
    />
  </LMap>
</template>

打字稿：

export default class Map extends Vue {
  // Some things I deleted beacause no interest

  @Getter(ReferencesGetter.country,{ namespace: ReferencesModule.name })
  readonly getCountry!: (code: string) => Country;

  @Getter(UserGetter.hasNationality,{ namespace: UserModule.name })
  readonly isUserInChina!: (country: Country) => boolean;

  readonly mapBoxUrl = `https://api.mapBox.com/styles/v1/mapBox/streets-zh-v1/tiles/{z}/{x}/{y}{r}?access_token=${this.appParameters.mapBoxKey}`;

  readonly googleMapsUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';

  isChinese = false;

  geosearchOptions = {} as SearchControlProps;

  async mounted() {
    // this returns true in my use case
    this.isChinese = this.isUserInChina(this.getCountry(CountryIsoCodes.China));
    this.geosearchOptions = {
      provider: this.isChinese
        ? new OpenStreetMapProvider({
          'accept-language': CountryIsoCodes.China.toLowerCase(),})
        : new GoogleProvider({
          params: {
            key: this.appParameters.googleMapKey,language: this.appParameters.language,region: this.appParameters.language,},}),showMarker: true,autoClose: true,searchLabel: this.$t('message.action.enteraddress'),};
  }
}

当我的用户不是中国人时一切都很好，但在其他情况下我总是有同样的错误：

虽然地图加载良好，但地理搜索栏不起作用

解决方法

简单的回答。

您不能初始化后声明道具。所以将它设置在mounted功能不工作。