Google 地图 - 形状

Google Maps - 绘制图形

除了简单的标记（Marker），Maps JavaScript API 还允许您直接在地图上绘制矢量图形，如线条（Polyline）、多边形（Polygon）、圆形（Circle）和矩形（Rectangle）。这些图形对于突出显示路线、定义区域或可视化区域非常有用。

这些图形与标记（Marker）类似，也是叠加层（Overlay），并且可以自定义其外观和行为。

折线（Polyline）

折线（Polyline）是由一系列由有序坐标序列（LatLng）定义的连接线段。它们是表示路径、路线或边界的理想选择。

1. 定义一个坐标对象数组 {lat: ..., lng: ...}，代表线条的顶点。
2. 实例化 google.maps.Polyline 类，传入 path 数组和样式选项。
3. 将 map 属性设置为您的地图实例。

主要的折线（Polyline）选项：

• path: 坐标数组。
• strokeColor: 线条颜色（例如，'#FF0000'，'blue'）。
• strokeOpacity: 透明度，从 0.0（完全透明）到 1.0（完全不透明）。
• strokeWeight: 线条粗细（以像素为单位）。
• geodesic: 如果设置为 true，则线条会沿着地球曲率绘制（推荐用于长距离线条），false 则在投影地图上绘制直线。
• editable: 如果设置为 true，允许用户修改线条的顶点。
• draggable: 如果设置为 true，允许用户拖动整条线条。

示例：绘制路线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Polyline Example</title>
    <style>#map { height: 400px; width: 100%; } html, body { height: 100%; margin: 0; padding: 0; }</style>
</head>
<body>
    <div id="map"></div>
    <script>
        async function initMap() {
            const mapCenter = { lat: 40.7128, lng: -74.0060 }; // 纽约
            const { Map } = await google.maps.importLibrary("maps");

            const map = new Map(document.getElementById("map"), {
                zoom: 12,
                center: mapCenter,
                mapId: "DEMO_MAP_ID"
            });

            const routeCoordinates = [
                { lat: 40.7580, lng: -73.9855 }, // 时代广场
                { lat: 40.7614, lng: -73.9776 }, // 现代艺术博物馆区域
                { lat: 40.7679, lng: -73.9822 }, // 中央公园南侧附近
                { lat: 40.7790, lng: -73.9635 }  // 大都会博物馆附近
            ];

            const routePath = new google.maps.Polyline({
                path: routeCoordinates,
                geodesic: true,
                strokeColor: '#0000FF', // 蓝色线条
                strokeOpacity: 0.8,
                strokeWeight: 3,
                map: map
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly" async defer></script>
</body>
</html>

预期输出：一张显示纽约的地图，上面有一条连接了多个点的蓝色线条，代表一条路径或路线。

多边形（Polygon）

多边形（Polygon）定义了地图上的一个封闭区域，由一系列连接的坐标构成，其中最后一个点隐式地连接回第一个点。它们用于突出显示区域、地带或领土。

创建多边形类似于创建折线，但它包含填充（Fill）属性。

主要的多边形（Polygon）选项：

• path: 定义边界的坐标数组（隐式闭合）。
• strokeColor、strokeOpacity、strokeWeight: 边界样式。
• fillColor: 内部区域的颜色。
• fillOpacity: 填充的透明度。
• editable、draggable。

示例：突出显示社区区域

<!DOCTYPE html>
<!-- ... 头部 ... -->
<body>
    <div id="map"></div>
    <script>
        async function initMap() {
            const mapCenter = { lat: 34.0522, lng: -118.2437 }; // 洛杉矶
            const { Map } = await google.maps.importLibrary("maps");

            const map = new Map(document.getElementById("map"), {
                zoom: 13,
                center: mapCenter,
                mapId: "DEMO_MAP_ID"
            });

            // 定义社区的大致坐标
            const neighborhoodCoords = [
                { lat: 34.060, lng: -118.290 },
                { lat: 34.075, lng: -118.280 },
                { lat: 34.070, lng: -118.265 },
                { lat: 34.055, lng: -118.275 },
                // 无需重复第一个点
            ];

            const neighborhoodPolygon = new google.maps.Polygon({
                paths: neighborhoodCoords, // 注意：'paths' 也是有效的（用于包含孔洞的复杂多边形）
                strokeColor: '#FF8800', // 橙色边框
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF8800',   // 橙色填充
                fillOpacity: 0.35,
                map: map
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly" async defer></script>
</body>
</html>

预期输出：一张显示洛杉矶的地图，上面有一个半透明的橙色多边形覆盖了定义的区域。

矩形（Rectangle）

矩形（Rectangle）是一种特殊类型的多边形，由其东北角和西南角（一个 LatLngBounds 对象）定义。

主要的矩形（Rectangle）选项：

• bounds: 一个 google.maps.LatLngBounds 对象或一个 LatLngBoundsLiteral ({north: ..., south: ..., east: ..., west: ...}) 字面量。
• 边框和填充选项（与多边形相同）。
• editable、draggable。

示例：定义矩形区域

<!DOCTYPE html>
<!-- ... 头部 ... -->
<body>
    <div id="map"></div>
    <script>
        async function initMap() {
            const mapCenter = { lat: 41.8781, lng: -87.6298 }; // 芝加哥
            // 导入 LatLngBounds 以及 Map
            const { Map, LatLngBounds } = await google.maps.importLibrary("maps");

            const map = new Map(document.getElementById("map"), {
                zoom: 11,
                center: mapCenter,
                mapId: "DEMO_MAP_ID"
            });

            // 定义矩形的边界
            const areaBounds = new LatLngBounds(
                { lat: 41.85, lng: -87.70 },  // 西南角
                { lat: 41.90, lng: -87.60 }   // 东北角
            );
            /* 或者使用字面量：
            const areaBoundsLiteral = {
                north: 41.90,
                south: 41.85,
                east: -87.60,
                west: -87.70
            };
            */

            const areaRectangle = new google.maps.Rectangle({
                strokeColor: '#800080', // 紫色边框
                strokeOpacity: 0.7,
                strokeWeight: 2,
                fillColor: '#800080',   // 紫色填充
                fillOpacity: 0.3,
                map: map,
                bounds: areaBounds // 使用 LatLngBounds 对象或字面量
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=maps" async defer></script>
    <!-- 注意：为了使用 LatLngBounds，需要显式包含 'maps' 库 -->
</body>
</html>

预期输出：一张显示芝加哥的地图，上面有一个半透明的紫色矩形突出显示了特定的区域。

圆形（Circle）

圆形（Circle）基于中心点（LatLng）和半径（以米为单位）定义一个圆形区域。

主要的圆形（Circle）选项：

• center: 圆形中心的 {lat: ..., lng: ...} 对象。
• radius: 圆形的半径，以米为单位。
• 边框和填充选项（与多边形相同）。
• editable、draggable。

示例：突出显示点周围的区域

<!DOCTYPE html>
<!-- ... 头部 ... -->
<body>
    <div id="map"></div>
    <script>
        async function initMap() {
            const mapCenter = { lat: 39.9526, lng: -75.1652 }; // 费城
            const { Map } = await google.maps.importLibrary("maps");

            const map = new Map(document.getElementById("map"), {
                zoom: 13,
                center: mapCenter,
                mapId: "DEMO_MAP_ID"
            });

            const cityCircle = new google.maps.Circle({
                strokeColor: '#008000', // 绿色边框
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#008000',   // 绿色填充
                fillOpacity: 0.35,
                map: map,
                center: mapCenter, // 将圆形中心设置在地图中心
                radius: 1500 // 半径，以米为单位 (1.5 千米)
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly" async defer></script>
</body>
</html>

预期输出：一张显示费城的地图，上面有一个以初始地图视图中心为圆心、半径为 1.5 千米的半透明绿色圆形。

移除图形

就像标记（Marker）一样，您可以通过调用图形叠加层（Overlay）的 setMap() 方法并传入 null 来将其从地图上移除。

// 假设 'routePath' 是您的 Polyline 对象
routePath.setMap(null);

// 假设 'cityCircle' 是您的 Circle 对象
cityCircle.setMap(null);

进一步阅读：

• 关于图形的官方文档
• Polyline 类参考
• Polygon 类参考
• Rectangle 类参考
• Circle 类参考