Google 地图叠加层学习笔记

什么是叠加层？

Google 地图叠加层可以让开发者将自己的数据覆盖在 Google 地图之上，以此来实现更为丰富的交互和可视化效果。

叠加层的类型

在 Google 地图中，有三种常用的叠加层类型：

1. 标记 Marker
2. 折线 Polyline
3. 多边形 Polygon

标记 Marker

标记是一种最基本、最常见的叠加层。标记通常表示地图上的一个单独的点，并可以包含自定义的内容和样式。

举例：你可以在地图上添加多个标记，每个标记代表一个商家，点击标记可以弹出商家的详细信息。

折线 Polyline

折线是由多个点构成的线条，在地图中通常用于表示路线、路径等。

举例：你可以在地图上添加一条折线，表示城市公交车的行驶路线。

多边形 Polygon

多边形是由多个点构成的封闭区域，通常用于表示某个区域的范围。

举例：你可以在地图上添加一个多边形，表示一个城市或州的行政区划范围。

实例演示

接下来，我们将演示一个简单的实例来展示如何在 Google 地图上添加叠加层。

javascriptCopy Code
// 创建一个标记
var marker = new google.maps.Marker({
    position: {lat: 37.7749, lng: -122.4194},
    map: map,
    title: 'San Francisco'
});

// 创建一条折线
var lineCoordinates = [
    {lat: 37.7749, lng: -122.4194},
    {lat: 37.3382, lng: -121.8863}
];

var line = new google.maps.Polyline({
    path: lineCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
});

line.setMap(map);

// 创建一个多边形
var triangleCoords = [
    {lat: 37.7749, lng: -122.4194},
    {lat: 37.3382, lng: -121.8863},
    {lat: 37.4419, lng: -122.1430}
];

var polygon = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
});

polygon.setMap(map);

上面的代码会创建一个标记、一条折线和一个多边形，并将它们添加到地图上。

总结

Google 地图叠加层可以让我们自定义地图上的内容，以此来实现更为丰富的交互和可视化效果。在具体实现时，我们可以使用标记、折线或多边形等叠加层类型，并结合自己的需求来添加和配置叠加层。