📌  相关文章
📜  如何在谷歌地图上显示 2 点目的地 js 代码堆栈溢出 - Javascript (1)

📅  最后修改于: 2023-12-03 14:52:58.626000             🧑  作者: Mango

如何在谷歌地图上显示2点目的地 - JavaScript

该问题可通过使用 JavaScript 和 Google Maps API 来解决。以下是一个用于在谷歌地图上显示两个目的地的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>显示2点目的地</title>
    <style>
        #map {
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body>
    <h1>显示2点目的地</h1>
    <div id="map"></div>

    <script>
        // 初始化地图
        function initMap() {
            var destination1 = {lat: 37.7749, lng: -122.4194}; // 第一个目的地的坐标
            var destination2 = {lat: 34.0522, lng: -118.2437}; // 第二个目的地的坐标

            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 8, // 缩放级别
                center: destination1 // 地图中心点
            });

            // 添加两个目的地的标记
            var marker1 = new google.maps.Marker({
                position: destination1,
                map: map,
            });

            var marker2 = new google.maps.Marker({
                position: destination2,
                map: map,
            });

            // 添加两个目的地之间的连线
            var directionsService = new google.maps.DirectionsService();
            var directionsRenderer = new google.maps.DirectionsRenderer({
                map: map
            });

            var request = {
                origin: destination1,
                destination: destination2,
                travelMode: 'DRIVING' // 行驶模式，这里使用驾车模式
            };

            directionsService.route(request, function(result, status) {
                if (status == 'OK') {
                    directionsRenderer.setDirections(result);
                }
            });
        }
    </script>

    <!-- 引入 Google Maps API -->
    <script async defer 
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
</body>
</html>

此示例使用了 Google Maps API 的 Directions Service 来获取两个目的地之间的驾车路线，并使用 Directions Renderer 来在地图上绘制连线及目的地的标记。请将 YOUR_API_KEY 替换为你自己的 Google API 密钥。

以上代码可以通过将 JavaScript 代码保存为 HTML 文件，通过浏览器打开该文件来运行。