当前位置：首页 > news >正文

Google Maps 安装使用教程

news 2025/7/5 5:17:06

一、Google Maps 简介

Google Maps 是谷歌提供的地图服务，通过其 JavaScript API，开发者可以在网页中嵌入地图，添加标记、路径、地理编码、路线导航等功能，适用于位置展示、物流追踪、LBS 应用等场景。

二、获取 Google Maps API Key

登录 Google Cloud 平台：https://console.cloud.google.com/
创建项目
启用 Maps JavaScript API、Geocoding API 等所需服务
获取 API 密钥（API Key）
设置配额限制和安全域名

三、引入 Google Maps 脚本

方式一：通过 `<script>` 标签加载

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

YOUR_API_KEY 替换为实际的 API 密钥
callback=initMap 表示在加载完成后调用 initMap 函数

四、基本地图使用示例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Google 地图示例</title><style>#map {height: 400px;width: 100%;}</style></head><body><h3>我的地图</h3><div id="map"></div><script>function initMap() {const location = { lat: 39.9042, lng: 116.4074 }; // 北京坐标const map = new google.maps.Map(document.getElementById("map"), {zoom: 10,center: location,});const marker = new google.maps.Marker({position: location,map: map,title: "北京"});}</script><script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script></body>
</html>

五、常用功能介绍

5.1 添加标记（Marker）

new google.maps.Marker({position: { lat: 31.2304, lng: 121.4737 },map: map,title: "上海"
});

5.2 信息窗口（InfoWindow）

const infowindow = new google.maps.InfoWindow({content: "<h4>这里是上海</h4>"
});
marker.addListener("click", () => {infowindow.open(map, marker);
});

5.3 绘制路线（DirectionsService）

const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);directionsService.route({origin: "Beijing",destination: "Shanghai",travelMode: "DRIVING"
}, (result, status) => {if (status === "OK") {directionsRenderer.setDirections(result);}
});