当前位置：首页 > JavaScript

谷歌地图 js 实现

2026-04-07 12:50:16JavaScript

以下是关于如何使用 Google Maps JavaScript API 实现地图功能的详细方法：

获取 API 密钥

在 Google Cloud Platform 控制台中创建项目并启用 Google Maps JavaScript API。生成 API 密钥并确保启用计费功能（部分功能需付费）。

引入 API 脚本

在 HTML 文件中添加以下脚本标签，替换 YOUR_API_KEY 为实际密钥：

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

创建基础地图

在 HTML 中添加地图容器元素：

<div id="map" style="height: 400px; width: 100%;"></div>

初始化地图的 JavaScript 代码：

谷歌地图 js 实现

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 37.7749, lng: -122.4194 }, // 旧金山坐标
    zoom: 12 // 缩放级别
  });
}

添加标记

在地图上添加标记点：

const marker = new google.maps.Marker({
  position: { lat: 37.7749, lng: -122.4194 },
  map: map,
  title: "San Francisco"
});

信息窗口

为标记添加点击弹出信息窗口：

const infowindow = new google.maps.InfoWindow({
  content: "<h3>San Francisco</h3><p>California, USA</p>"
});

marker.addListener("click", () => {
  infowindow.open(map, marker);
});

绘制形状

添加圆形覆盖物示例：

谷歌地图 js 实现

const cityCircle = new google.maps.Circle({
  strokeColor: "#FF0000",
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: "#FF0000",
  fillOpacity: 0.35,
  map: map,
  center: { lat: 37.7749, lng: -122.4194 },
  radius: 2000 // 2公里半径
});

路线绘制

绘制两点间的折线：

const flightPath = new google.maps.Polyline({
  path: [
    { lat: 37.7749, lng: -122.4194 },
    { lat: 34.0522, lng: -118.2437 } // 洛杉矶坐标
  ],
  geodesic: true,
  strokeColor: "#FF0000",
  strokeOpacity: 1.0,
  strokeWeight: 2,
  map: map
});

事件监听

添加地图点击事件监听：

map.addListener("click", (event) => {
  console.log("Clicked at:", event.latLng.lat(), event.latLng.lng());
});

地理编码

将地址转换为坐标：

const geocoder = new google.maps.Geocoder();
geocoder.geocode({ address: "1600 Amphitheatre Parkway" }, (results, status) => {
  if (status === "OK") {
    map.setCenter(results[0].geometry.location);
    new google.maps.Marker({
      map: map,
      position: results[0].geometry.location
    });
  }
});

自定义样式

应用自定义地图样式：

const styles = [
  {
    featureType: "water",
    elementType: "geometry",
    stylers: [{ color: "#e9e9e9" }]
  }
];
map.setOptions({ styles: styles });