Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
# Cara mengatur bahasa pilihan untuk peta
Amazon Location Service memungkinkan Anda mengatur bahasa pilihan di sisi klien dengan memperbarui deskriptor gaya untuk bahasa tertentu. Anda dapat mengatur bahasa pilihan dan menampilkan konten dalam bahasa yang disematkan. Kalau tidak, itu akan kembali ke bahasa lain.
**catatan**
Untuk informasi selengkapnya, lihat [Lokalisasi dan internasionalisasi](maps-localization-internationalization.md).
## Tetapkan bahasa pilihan ke bahasa Jepang dan tampilkan peta Jepang
Dalam contoh ini, Anda akan mengatur gaya pembaruan untuk menampilkan label peta dalam bahasa Jepang (ja).
### Tetapkan bahasa pilihan ke contoh bahasa Jepang
------
#### [ index.html ]
```
```
------
#### [ style.css ]
```
body { margin: 0; }
#map { height: 100vh; }
```
------
#### [ main.js ]
```
async function getStyleWithPreferredLanguage(preferredLanguage) {
const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;
return fetch(styleUrl)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.json();
})
.then(styleObject => {
if (preferredLanguage !== "en") {
styleObject = setPreferredLanguage(styleObject, preferredLanguage);
}
return styleObject;
})
.catch(error => {
console.error('Error fetching style:', error);
});
}
const setPreferredLanguage = (style, language) => {
let nextStyle = { ...style };
nextStyle.layers = nextStyle.layers.map(l => {
if (l.type !== 'symbol' || !l?.layout?.['text-field']) return l;
return updateLayer(l, /^name:([A-Za-z\-\_]+)$/g, `name:${language}`);
});
return nextStyle;
};
const updateLayer = (layer, prevPropertyRegex, nextProperty) => {
const nextLayer = {
...layer,
layout: {
...layer.layout,
'text-field': recurseExpression(
layer.layout['text-field'],
prevPropertyRegex,
nextProperty
)
}
};
return nextLayer;
};
const recurseExpression = (exp, prevPropertyRegex, nextProperty) => {
if (!Array.isArray(exp)) return exp;
if (exp[0] !== 'coalesce') return exp.map(v =>
recurseExpression(v, prevPropertyRegex, nextProperty)
);
const first = exp[1];
const second = exp[2];
let isMatch =
Array.isArray(first) &&
first[0] === 'get' &&
!!first[1].match(prevPropertyRegex)?.[0];
isMatch = isMatch && Array.isArray(second) && second[0] === 'get';
isMatch = isMatch && !exp?.[4];
if (!isMatch) return exp.map(v =>
recurseExpression(v, prevPropertyRegex, nextProperty)
);
return [
'coalesce',
['get', nextProperty],
['get', 'name:en'],
['get', 'name']
];
};
```
------
## Tetapkan bahasa pilihan berdasarkan bahasa browser pengguna akhir
Dalam contoh ini, Anda akan mengatur gaya pembaruan untuk menampilkan label peta dalam bahasa perangkat pengguna.
### Tetapkan bahasa pilihan berdasarkan contoh bahasa browser
------
#### [ index.html ]
```
```
------
#### [ style.css ]
```
body { margin: 0; }
#map { height: 100vh; }
```
------
#### [ main.js ]
```
async function getStyleWithPreferredLanguage(preferredLanguage) {
const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;
return fetch(styleUrl)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.json();
})
.then(styleObject => {
if (preferredLanguage !== "en") {
styleObject = setPreferredLanguage(styleObject, preferredLanguage);
}
return styleObject;
})
.catch(error => {
console.error('Error fetching style:', error);
});
}
const setPreferredLanguage = (style, language) => {
let nextStyle = { ...style };
nextStyle.layers = nextStyle.layers.map(l => {
if (l.type !== 'symbol' || !l?.layout?.['text-field']) return l;
return updateLayer(l, /^name:([A-Za-z\-\_]+)$/g, `name:${language}`);
});
return nextStyle;
};
const updateLayer = (layer, prevPropertyRegex, nextProperty) => {
const nextLayer = {
...layer,
layout: {
...layer.layout,
'text-field': recurseExpression(
layer.layout['text-field'],
prevPropertyRegex,
nextProperty
)
}
};
return nextLayer;
};
const recurseExpression = (exp, prevPropertyRegex, nextProperty) => {
if (!Array.isArray(exp)) return exp;
if (exp[0] !== 'coalesce') return exp.map(v =>
recurseExpression(v, prevPropertyRegex, nextProperty)
);
const first = exp[1];
const second = exp[2];
let isMatch =
Array.isArray(first) &&
first[0] === 'get' &&
!!first[1].match(prevPropertyRegex)?.[0];
isMatch = isMatch && Array.isArray(second) && second[0] === 'get';
isMatch = isMatch && !exp?.[4];
if (!isMatch) return exp.map(v =>
recurseExpression(v, prevPropertyRegex, nextProperty)
);
return [
'coalesce',
['get', nextProperty],
['get', 'name:en'],
['get', 'name']
];
};
```
------