地图地图
此库用于简化使用过程 亚马逊定位服务 与 映射- gl- 地理编码器 在JavaScript应用程序中.
安装
从国家防范机制安装此库供模块使用:
npm install @aws/amazon-location-for-maplibre-gl-geocoder
您也可以导入 HTML 和 CSS 文件供浏览器直接使用.
<script src="https://cdn.jsdelivr.net/npm/@aws/amazon-location-for-maplibre-gl-geocoder@2"></script>
<link
href="https://cdn.jsdelivr.net/npm/@aws/amazon-location-for-maplibre-gl-geocoder@2/dist/amazon-location-for-mlg-styles.css"
rel="stylesheet"
/>
使用量
模块的用法 - 独立的地盘 SDK
此示例使用 JavaScript V3 的 AWS SDK 软件 获得一个 GeoPlacesClient 供图书馆使用,以及 认证帮助 用于认证 GeoPlacesClient。 它为地理编码器提供了所有API.
// Import MapLibre GL JS
import maplibregl from "maplibre-gl";
// Import from the AWS JavaScript SDK V3
import { GeoPlacesClient } from "@aws-sdk/client-geo-places";
// Import the utility functions
import { withAPIKey } from "@aws/amazon-location-utilities-auth-helper";
// Import the AmazonLocationMaplibreGeocoder
import {
buildAmazonLocationMaplibreGeocoder,
AmazonLocationMaplibreGeocoder,
} from "@aws/amazon-location-for-maplibre-gl-geocoder";
const apiKey = "<API Key>";
const mapName = "Standard";
const region = "<Region>"; // region containing Amazon Location API Key
// Create an authentication helper instance using an API key and region
const authHelper = await withAPIKey(apiKey, region);
const client = new GeoPlacesClient(authHelper.getClientConfig());
// Render the map
const map = new maplibregl.Map({
container: "map",
center: [-123.115898, 49.295868],
zoom: 10,
style: `https://maps.geo.${region}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`,
});
// Gets an instance of the AmazonLocationMaplibreGeocoder Object.
const amazonLocationMaplibreGeocoder = buildAmazonLocationMaplibreGeocoder(client, { enableAll: true });
// Now we can add the Geocoder to the map.
map.addControl(amazonLocationMaplibreGeocoder.getPlacesGeocoder());
使用浏览器 - 独立的 GeoPlaces SDK
客户和公用事业职能可在 amazonLocationClient 全球.
其中一些例子使用"亚马逊地平板电脑". 亚马逊GeoPlacesClient基于 JavaScript V3 的 AWS SDK 软件 ,并允许通过 HTML 文件引用的脚本给 Amazon Location 打电话.
这个例子使用"亚马逊GeoPlacesClient"来提出使用API密钥认证的请求.
<!-- Import the Amazon Location For Maplibre Geocoder -->
<script src="https://cdn.jsdelivr.net/npm/@aws/amazon-location-for-maplibre-gl-geocoder@2"></script>
<link
href="https://cdn.jsdelivr.net/npm/@aws/amazon-location-for-maplibre-gl-geocoder@2/dist/amazon-location-for-mlg-styles.css"
rel="stylesheet"
/>
<!-- Import the Amazon GeoPlacesClient -->
<script src="https://cdn.jsdelivr.net/npm/@aws/amazon-location-client@1"></script>
const apiKey = "<API Key>";
const mapStyle = "Standard";
const region = "<Region>"; // region containing Amazon Location API key
// Create an authentication helper instance using an API key and region
const authHelper = await amazonLocationClient.withAPIKey(apiKey, region);
const client = new amazonLocationClient.GeoPlacesClient(authHelper.getClientConfig());
// Render the map
const map = new maplibregl.Map({
container: "map",
center: [-123.115898, 49.295868],
zoom: 10,
style: `https://maps.geo.${region}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`,
});
// Initialize the AmazonLocationMaplibreGeocoder object
const amazonLocationMaplibreGeocoderObject = amazonLocationMaplibreGeocoder.buildAmazonLocationMaplibreGeocoder(
client,
{ enableAll: true },
);
// Use the AmazonLocationWithMaplibreGeocoder object to add a geocoder to the map.
map.addControl(amazonLocationMaplibreGeocoderObject.getPlacesGeocoder());
模块的使用 -- -- 合并位置
此示例使用 JavaScript V3 的 AWS SDK 软件 获取一个地址地址地址向图书馆提供,以及 认证帮助 用于认证位置中心。 它可以让所有API用于地理编码器.
使用合并的 LaceClient API 需要您在选项变量中提供 PlacesIndex(您在 AWS 账户中的位置资源名称) .
// Import MapLibre GL JS
import maplibregl from "maplibre-gl";
// Import from the AWS JavaScript SDK V3
import { LocationClient } from "@aws-sdk/client-location";
// Import the utility functions
import { withAPIKey } from "@aws/amazon-location-utilities-auth-helper";
// Import the AmazonLocationMaplibreGeocoder
import {
buildAmazonLocationMaplibreGeocoder,
AmazonLocationMaplibreGeocoder,
} from "@aws/amazon-location-for-maplibre-gl-geocoder";
const identityPoolId = "<Identity Pool ID>";
const mapName = "<Map Name>";
const region = "<Region>"; // region containing Amazon Location resource
const placeIndex = "<PlaceIndexName>"; // Name of your places resource in your AWS Account.
// Create an authentication helper instance using credentials from Cognito
const authHelper = await withIdentityPoolId(identityPoolId, region);
const client = new LocationClient(authHelper.getLocationClientConfig());
// Render the map
const map = new maplibregl.Map({
container: "map",
center: [-123.115898, 49.295868],
zoom: 10,
style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor`,
...authHelper.getMapAuthenticationOptions(),
});
// Gets an instance of the AmazonLocationMaplibreGeocoder Object.
const amazonLocationMaplibreGeocoder = buildAmazonLocationMaplibreGeocoder(client, {
enableAll: true,
placesIndex: placeIndex,
});
// Now we can add the Geocoder to the map.
map.addControl(amazonLocationMaplibreGeocoder.getPlacesGeocoder());
使用浏览器 - 合并位置Client SDK
客户和公用事业职能可在 amazonLocationClient 全球.
其中一些例子使用亚马逊地块客户端. Amazon 位置客户端基于 JavaScript V3 的 AWS SDK 软件 ,并允许通过 HTML 文件引用的脚本给 Amazon Location 打电话.
使用 LaceClient API 需要您在选项变量中提供 PlacesIndex(您在 AWS 账户中的位置资源名称) .
这个例子使用亚马逊地标客户端来请求使用亚马逊地标认证.
<!-- Import the Amazon Location For Maplibre Geocoder -->
<script src="https://cdn.jsdelivr.net/npm/@aws/amazon-location-for-maplibre-gl-geocoder@2"></script>
<link
href="https://cdn.jsdelivr.net/npm/@aws/amazon-location-for-maplibre-gl-geocoder@2/dist/amazon-location-for-mlg-styles.css"
rel="stylesheet"
/>
<!-- Import the Amazon Location Client -->
<script src="https://cdn.jsdelivr.net/npm/@aws/amazon-location-client@1"></script>
const identityPoolId = "<Identity Pool ID>";
const mapName = "<Map Name>";
const region = "<Region>"; // region containing Amazon Location resource
const placeIndex = "<PlaceIndexName>"; // Name of your places resource in your AWS Account.
// Create an authentication helper instance using credentials from Cognito
const authHelper = await amazonLocationClient.withIdentityPoolId(identityPoolId);
// Initialize the LocationClient
const client = new LocationClient(authHelper.getLocationClientConfig());
// Render the map
const map = new maplibregl.Map({
container: "map",
center: [-123.115898, 49.295868],
zoom: 10,
style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor`,
...authHelper.getMapAuthenticationOptions(),
});
// Initialize the AmazonLocationMaplibreGeocoder object
const amazonLocationMaplibreGeocoderObject = amazonLocationMaplibreGeocoder.buildAmazonLocationMaplibreGeocoder(
client,
{ enableAll: true, placesIndex: placeIndex },
);
// Use the AmazonLocationWithMaplibreGeocoder object to add a geocoder to the map.
map.addControl(amazonLocationMaplibreGeocoderObject.getPlacesGeocoder());
文档
导入库并按需要调用顶级命名空间中的公用功能 。 您可以在文档部分找到这些功能的更多细节.
npm run typedoc
buildAmazonLocationMaplibreGeocoder
创建 AmazonLocationMaplibreGeocoder 实例,它是其他所有呼叫的切入点.
使用独立的GeoPlacesClient API呼叫(客户端为GeoPlacesClient)
const amazonLocationMaplibreGeocoder = buildAmazonLocationMaplibreGeocoder(client, { enableAll: true });
使用合并的 LaceClient API 呼叫( 客户端为 LaceClient 实例)
const amazonLocationMaplibreGeocoder = buildAmazonLocationMaplibreGeocoder(client, {
enableAll: true,
placesIndex: placeIndex,
});
getPlacesGeocoder
返回一个可以直接添加到地图中的可用 IControl 对象.
const geocoder = getPlacesGeocoder();
// Initialize map see: <insert link to initializing a map instance here>
let map = await initializeMap();
// Add the geocoder to the map.
map.addControl(geocoder);
Options 说明
| 选项 | 说明 |
|---|---|
| 全部启用 ?: 布尔 | 当错误遵守时, explicict 设置布尔标记, 用于启用 GetSug建议并启用SearchByPlaceId 。 当它们都是真的时. |
| 启用“ 获取建议” 吗 : boolean | 如果错误, 则表示仅在输入密钥上进行搜索 。 如果为真,则表示Geocoder将在更新时在输入框上搜索. |
| 启用SearchByPlaceId?:布尔 | 如果为真, 则按位置ID搜索 |
| 省略不带标签的建议吗 : 布尔 | Omits 建议没有 PlaceId(例如查询字符串建议,例如"靠近我的皮扎") |
| 占位符 ?: 字符串 | 覆盖输入字段中的字符串占位符文本 |
| index 吗 : 字符串 | 位置索引资源的名称 |
| 飞去?:布尔或 飞到选项 | 如果错误,将映射到选定结果的动画将被禁用。 如果选中的话, 动画地图将会使用默认的动画参数 。 如果一个对象,它将作为选项传递到 映射 flyTo 或 fitBounds 方法提供对过渡动画的控制. 参考 |
| 缩放 ? 数字 | 在地理编码上的结果是,当响应中找不到一个bbox时,地图的动能应该放大到什么水平. 如果找到 bbox , 地图将适合 bbox . |
| 轨迹近似 ?: 布尔 | 如果真实, 地理编码器的相近性会自动根据地图视图更新 . |
| 靠近MinZoom吗 | 如果设置平面, 这是最小的缩放级别, 开始考虑它 . |
| 明伦斯? : 号码 | 在显示结果前输入的最小字符数 . |
| 倒转吉奥码 ?: 布尔 | 如果为真,则启用倒转地理编码模式。 在倒向地理编码中,搜索输入预计将以正方形(tat,lon)为坐标,建议为倒向地理编码. |
| 限制? : 数字 | 要显示的最大结果数 . |
| 崩溃 ?: 布尔 | 如果是真的,地理编码器控制会崩溃,直到徘徊或被聚焦. |
| - 布尔克 | 如果真实,地理编码器控制会清除内容并模糊用户按出逃密钥时. |
| 清除 Blur 吗 : 布尔 | 如果真实,当输入模糊时,地理编码器控制会清除其值. |
| (原始内容存档于2018-03-21) (英语). localGeocoder Only?: boolean | 如果为真,则表示本地Geocoder结果应该是返回用户的唯一结果. 如果错误,则表示本地的Geocoder结果应当与来自Maplibre API的结果与本地的Geocoder结果的排名相加. |
| 解开搜索器 | 设定一个用户输入 Geocoder 输入框时在询问服务器前等待的时间, 以毫秒计 。 此参数可能有助于减少为单一查询而发出的API呼叫的总数. |
| 语言 ? : 字符串 | 指定用于响应文本和查询结果加权的语言。 选项是IETF语言标记,由强制性的ISO 639-1语言代码以及国家或脚本可选的一个或多个IETF子标签组成. 多个值也可以指定,用逗号分隔. 默认浏览器的语言设置 . |
| 倒转模式 : “ 距离 ” 或 “ 分数 ” | 如果真是这样, Markers 将在查询的顶端结果位置上添加到地图中。 如果值是对象,则会使用这些选项来构建标记. 如果错误, 地图上不会添加标记 。 需要设置选项. maplibregl . |
| 获得项目值? (项目: 卡门·盖奥杰森福特) qq 字符串 | 指定如何在搜索栏中提供选定结果的函数。 输出字符串中的 HTML 标记将不会被渲染 。 默认为( 项 ) {} 项. place name |
| (项目: 卡门·盖奥杰森福特) qq 字符串 | 指定如何在下放菜单中提供结果的函数 。 返回字符串中的任何 HTML 都会被渲染 . |
| 弹出者 卡门·盖奥杰森福特(e) qq 字符串 | 指定弹出菜单中应如何提供结果的函数 。 返回字符串中的任何 HTML 都会被渲染 . |
| 过滤器 : (项目 : 卡门·盖奥杰森福特? 布尔? | 一个接受CarmenGeojsonFeature的函数在将Geocoding API响应纳入建议列表之前过滤出结果. 返回真实的保存物品, 否则是假的. |
参考 Maplibre 地理编码器选项 额外使用信息.
获取帮助
与我们团队互动的最佳方式是通过GitHub. 你们可以 打开一个问题 从我们的模板中选择一个 错误报告, (中文(简体) ), 特性请求 或者说 指导。 。 。 . 如果您有支持计划 AWS 支持,也可以创建新的支持案件.
请在开始发行前检查以下资源:
- 我们 更改日志 用于最近的变化.
捐款
见 捐款 更多信息.
许可证
这个项目根据Apache-2.0许可证获得许可证.