我尝试使用 mapbox 作为 VGeosearch 的提供者
我的用例是当用户是中国人时，我需要使用 mapbox 实例化地图（用于坐标规则），在其他情况下使用谷歌地图，所有这些都使用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'),
};
}
}
当我的用户不是中国人时，一切都很好，但在另一种情况下，我总是有同样的错误：
地图以很好的方式加载，但地理搜索栏不起作用