typescript - 使用 mapbox 作为 VGeosearch 的提供者
问题描述
我尝试使用 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'),
};
}
}
当我的用户不是中国人时,一切都很好,但在另一种情况下,我总是有同样的错误:
地图以很好的方式加载,但地理搜索栏不起作用
解决方案
简单的回答。
初始化后不能声明 props。所以在mounted
函数中设置它是行不通的。
推荐阅读
- javascript - 计算经过的时间并将其放入 JavaScript 中的 Days:Hours:Minutes:Seconds 格式,其中经过的时间每秒更新一次
- elasticsearch - 使用弹性搜索 py 批量更新无类型
- php - MYSLI_QUERY 返回 false 但 MYSQLI_ERROR 从 5.6 更新 php 7.2 后未显示错误
- java - 如何实现一个持续活跃的循环来检查变化(布尔值)?
- reactjs - reactjs 没有从 index.css 中获取样式
- azure-aks - 具有虚拟节点和自动缩放功能的 Azure Kubernetes - 这可能吗?
- java - 返回方程 x1 + x2 + x3 = num 的解数
- ms-access-2013 - 如何将字段数据打印到 A4 纸的特定区域?
- css - 引导滑块文本覆盖正在禁用导航链接
- xpath - 如何使用 importXML 从网站将数据导入我的 Google 表格