问题描述
我尝试使用 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
功能不工作。