如何使用 Google Maps API 构建几个简单的项目
如何使用 Google Maps API 构建几个简单的项目

如何使用 Google Maps API 构建几个简单的项目

  • 130视图
  • 2 分钟阅读
本文将介绍如何使用 GCP 上的 Google Maps API 构建交互式地图、优化路线和分析位置数据。.
行政
  • 27 2025 年 10 月
0 股票
0
0
0
0
0
股票
0
0
0
0

项目 1：带位置搜索和自动补全功能的网页版«门店定位器»。

应用： 在地图上显示所有分支机构/代表处，快速搜索附近地址/位置。.
蜜蜂： Maps JavaScript API + 地点（自动完成/详细信息）。. Google for Developers

简易框架（HTML + JS）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>门店定位器</title>
<style>#map{height:70vh} .panel{padding:8px}</style>
<script>
let map, marker, autocomplete, sessionToken;

async function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 35.6892, lng: 51.3890 }, zoom: 12, mapId: "YOUR_MAP_ID"
});

// Autocomplete با Session Token برای صورت‌حساب درست
sessionToken = new google.maps.places.AutocompleteSessionToken();
const input = document.getElementById("search");
autocomplete = new google.maps.places.Autocomplete(input, { fields: ["place_id","geometry","name"] });
autocomplete.setOptions({ sessionToken });

autocomplete.addListener("place_changed", () => {
const place = autocomplete.getPlace();
if (!place.geometry) return;
const loc = place.geometry.location;
map.panTo(loc); map.setZoom(15);
if (marker) marker.setMap(null);
marker = new google.maps.Marker({ position: loc, map, title: place.name });
});
}
</script>
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap">
</script>
</head>
<body>
<div class="panel">
<input id="search" placeholder="我附近的咖啡馆/商店……." size="40" />
</div>
<div id="map"></div>
</body>
</html>

  • 重点： 会话令牌 在自动完成功能中，将搜索分组到会话和计费中是正确的。如果您使用现成组件，会话管理是自动的；如果您使用原始服务，则需要手动操作。 自动完成会话令牌 构建（如上所述）。. Google for Developers+2Google for Developers+2

  • 如果您使用云样式， 地图 ID 将其设置为您的地图 ID。. Google for Developers+1

  • 限制密钥。 （HTTP 引用来源 + Places/Maps JS 的 API 限制）。.

项目 2：«优化停靠顺序的多站点路线»

应用： 轻型快递/物流、营销销售、快速路线规划，并考虑最佳停靠顺序。.
API： 路由 API（计算路由 和 优化航点顺序). Google for Developers+1

示例请求（cURL – REST）

curl -X POST "https://routes.googleapis.com/directions/v2:computeRoutes" \ -H "Content-Type: application/json" \ -H "X-Goog-Api-Key: $API_KEY" \ -H "X-Goog-FieldMask: routes.optimizedIntermediateWaypointIndex,routes.distanceMeters,routes.duration" \ -d '{ "origin": {"address": "Tehran"}, "destination": {"address": "Tehran"}, "travelMode": "DRIVE", "optimizeWaypointOrder": true, "intermediates": [ {"address": "Karaj"}, {"address": "Qom"}, {"address": "Varamin"}, {"address": "Ekbatan, Tehran"} ] }'"

  • 答案包括 routes.optimizedIntermediateWaypointIndex 由此可得出中间停靠点的最佳顺序。. Google for Developers

  • 对于多起点多终点的时间/距离矩阵，您还可以使用 计算路径矩阵 使用（在同一路由 API 集中） Google for Developers

  • 再次 将密钥限制在服务器 IP 地址范围内。 如果请求是从后端发出的。. Google for Developers

项目 3：«订单前端/后端地址验证»

应用： 在线商店结账，包裹退货/配送错误预防。.
API： 地址验证 API。. Google for Developers+1

简单示例（cURL – REST）

curl -X POST "https://addressvalidation.googleapis.com/v1:validateAddress?key=$API_KEY" \ -H "Content-Type: application/json" \ -d '{ "address": { "regionCode": "IR", "locality": "Tehran", "addressLines": ["Valiasr St, No. 123"] } }'"

  • 输出结果包括地址组件的质量/标准化和最佳地理编码；您可以向用户提出改进建议。. Google for Developers

Python后端示例（官方客户端）

from google.maps import addressvalidation_v1 as av client = av.AddressValidationClient() req = av.ValidateAddressRequest( address=av.PostalAddress(region_code="IR", locality="Tehran", address_lines=["Valiasr St, No. 123"]) ) resp = client.validate_address(request=req) print(resp.result.verdict, resp.result.address.formatted_address)

（可选）云样式和地图 ID

如果您想要一个品牌化的用户界面，请在控制台中设置。 基于云的地图样式 创建地图，获取地图 ID 并将其设置到您的客户端（支持 Web JS 和静态/Android/iOS）。您可以在控制台中更新样式，而无需更改代码。如需快速获取灵感， 样式向导 看。.

[全部的： 1   平均的： 5/5]
在本文中：
,,
文章作者：
跟随
发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

上一篇文章
下一篇文章
您可能也喜欢