Typescript 将mapbox用作VGeosearch的提供程序
我尝试使用mapbox作为 我的使用案例是,当用户是中国人时,我需要用mapbox(坐标规则)实例化地图,在其他情况下使用Google地图,所有这些都需要 所以,我的代码: Vue模板:Typescript 将mapbox用作VGeosearch的提供程序,typescript,vuejs2,vue2leaflet,Typescript,Vuejs2,Vue2leaflet,我尝试使用mapbox作为 我的使用案例是,当用户是中国人时,我需要用mapbox(坐标规则)实例化地图,在其他情况下使用Google地图,所有这些都需要 所以,我的代码: Vue模板: <template> <LMap> <LTileLayer :url="isChinese ? mapBoxUrl : googleMapsUrl" /> <Vue2LeafletGoogleMutant v-if=
<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>
当我的用户不是中国人时,一切都很好,但在另一种情况下,我总是有相同的错误:
其中地图以良好的方式加载,但地理搜索栏不起作用简单答案
初始化后不能声明道具。
因此,在挂载的功能中设置它不起作用。简单回答
初始化后不能声明道具。
因此,在mounted
功能中设置它不起作用
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'),
};
}
}