选择您的 Cookie 首选项

我们使用必要 Cookie 和类似工具提供我们的网站和服务。我们使用性能 Cookie 收集匿名统计数据,以便我们可以了解客户如何使用我们的网站并进行改进。必要 Cookie 无法停用,但您可以单击“自定义”或“拒绝”来拒绝性能 Cookie。

如果您同意,AWS 和经批准的第三方还将使用 Cookie 提供有用的网站功能、记住您的首选项并显示相关内容,包括相关广告。要接受或拒绝所有非必要 Cookie,请单击“接受”或“拒绝”。要做出更详细的选择,请单击“自定义”。

How to set the political view of a map

聚焦模式

本页内容

How to set the political view of a map - Amazon Location Service
此页面尚未翻译为您的语言。 请求翻译

Amazon Location Service enables you to set the political view to ensure your application complies with local laws. You can set a political view and compare maps from different political perspectives.

Note

For more information, see Localization and internationalization.

Set political view and compare with international perspective

In this example, you will create and compare maps from two different political views: an international perspective and Turkey's view on Cyprus.

index.html
<!DOCTYPE html> <html lang="en"> <head> <title>Display a map</title> <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." /> <meta charset='utf-8'> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.css' /> <link rel='stylesheet' href='style.css' /> <script src='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.js'></script> <script src="https://unpkg.com/@mapbox/mapbox-gl-sync-move@0.3.1"></script> <script src='main.js'></script> </head> <body> <!-- Map container --> <div class="maps"> <div id="internatinalView"></div> <div id="turkeyView"></div> </div> <script> const apiKey = "Add Your Api Key"; const mapStyle = "Standard"; const awsRegion = "eu-central-1"; // International perspective without political-view query parameter const internatinalViewMapStyleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`; // Turkey perspective with political-view query parameter const turkeyViewMapStyleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?political-view=TUR&key=${apiKey}`; const internatinalViewMap = new maplibregl.Map({ container: 'internatinalView', // container id style: internatinalViewMapStyleUrl, // style URL center: [33.0714561, 35.1052139], // starting position [lng, lat] zoom: 7.5, }); const turkeyViewMap = new maplibregl.Map({ container: 'turkeyView', // container id style: turkeyViewMapStyleUrl, // style URL center: [33.0714561, 35.1052139], zoom: 7.5, }); // Sync map zoom and center syncMaps(internatinalViewMap, turkeyViewMap); // Informational popup for international view new maplibregl.Popup({closeOnClick: false}) .setLngLat([33, 35.5]) .setHTML('<h4>International view <br> recognizes <br> Cyprus</h4>') .addTo(internatinalViewMap); // Informational popup for Turkey's view new maplibregl.Popup({closeOnClick: false}) .setLngLat([33, 35.5]) .setHTML('<h4>Turkey does not <br> recognize <br> Cyprus</h4>') .addTo(turkeyViewMap); </script> </body> </html>
style.css
body { margin: 0; padding: 0; } html, body { height: 100%; } #internatinalView, #turkeyView { height: 100%; width: 100%; } .maps { display: flex; width: 100%; height: 100%; }

index.html
<!DOCTYPE html> <html lang="en"> <head> <title>Display a map</title> <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." /> <meta charset='utf-8'> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.css' /> <link rel='stylesheet' href='style.css' /> <script src='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.js'></script> <script src="https://unpkg.com/@mapbox/mapbox-gl-sync-move@0.3.1"></script> <script src='main.js'></script> </head> <body> <!-- Map container --> <div class="maps"> <div id="internatinalView"></div> <div id="turkeyView"></div> </div> <script> const apiKey = "Add Your Api Key"; const mapStyle = "Standard"; const awsRegion = "eu-central-1"; // International perspective without political-view query parameter const internatinalViewMapStyleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`; // Turkey perspective with political-view query parameter const turkeyViewMapStyleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?political-view=TUR&key=${apiKey}`; const internatinalViewMap = new maplibregl.Map({ container: 'internatinalView', // container id style: internatinalViewMapStyleUrl, // style URL center: [33.0714561, 35.1052139], // starting position [lng, lat] zoom: 7.5, }); const turkeyViewMap = new maplibregl.Map({ container: 'turkeyView', // container id style: turkeyViewMapStyleUrl, // style URL center: [33.0714561, 35.1052139], zoom: 7.5, }); // Sync map zoom and center syncMaps(internatinalViewMap, turkeyViewMap); // Informational popup for international view new maplibregl.Popup({closeOnClick: false}) .setLngLat([33, 35.5]) .setHTML('<h4>International view <br> recognizes <br> Cyprus</h4>') .addTo(internatinalViewMap); // Informational popup for Turkey's view new maplibregl.Popup({closeOnClick: false}) .setLngLat([33, 35.5]) .setHTML('<h4>Turkey does not <br> recognize <br> Cyprus</h4>') .addTo(turkeyViewMap); </script> </body> </html>
style.css
body { margin: 0; padding: 0; } html, body { height: 100%; } #internatinalView, #turkeyView { height: 100%; width: 100%; } .maps { display: flex; width: 100%; height: 100%; }
<!DOCTYPE html> <html lang="en"> <head> <title>Display a map</title> <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." /> <meta charset='utf-8'> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.css' /> <link rel='stylesheet' href='style.css' /> <script src='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.js'></script> <script src="https://unpkg.com/@mapbox/mapbox-gl-sync-move@0.3.1"></script> <script src='main.js'></script> </head> <body> <!-- Map container --> <div class="maps"> <div id="internatinalView"></div> <div id="turkeyView"></div> </div> <script> const apiKey = "Add Your Api Key"; const mapStyle = "Standard"; const awsRegion = "eu-central-1"; // International perspective without political-view query parameter const internatinalViewMapStyleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`; // Turkey perspective with political-view query parameter const turkeyViewMapStyleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?political-view=TUR&key=${apiKey}`; const internatinalViewMap = new maplibregl.Map({ container: 'internatinalView', // container id style: internatinalViewMapStyleUrl, // style URL center: [33.0714561, 35.1052139], // starting position [lng, lat] zoom: 7.5, }); const turkeyViewMap = new maplibregl.Map({ container: 'turkeyView', // container id style: turkeyViewMapStyleUrl, // style URL center: [33.0714561, 35.1052139], zoom: 7.5, }); // Sync map zoom and center syncMaps(internatinalViewMap, turkeyViewMap); // Informational popup for international view new maplibregl.Popup({closeOnClick: false}) .setLngLat([33, 35.5]) .setHTML('<h4>International view <br> recognizes <br> Cyprus</h4>') .addTo(internatinalViewMap); // Informational popup for Turkey's view new maplibregl.Popup({closeOnClick: false}) .setLngLat([33, 35.5]) .setHTML('<h4>Turkey does not <br> recognize <br> Cyprus</h4>') .addTo(turkeyViewMap); </script> </body> </html>
隐私网站条款Cookie 首选项
© 2025, Amazon Web Services, Inc. 或其附属公司。保留所有权利。