Question

我想在我的网站上添加一些关于我的行程的地图。

我使用Google Maps Javascript API创建了自定义样式。

我看到的所有示例都包含HTML文件中的输入，因此用户可以插入来源和目的地，

但我不想那样。我的目标是只显示一个带有方向的“静态”地图，例如从我的自定义风格到奥兰多到基韦斯特。

任何人都可以帮我解决这些问题吗？

非常感谢！

这是我的自定义风格：

function initMap() {
  var customMapType = new google.maps.StyledMapType([
      {
        "featureType": "all",
        "elementType": "all",
        "stylers": [
            {
                "invert_lightness": true
            },
            {
                "saturation": 10
            },
            {
                "lightness": 30
            },
            {
                "gamma": 0.5
            },
            {
                "hue": "#435158"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "all",
        "stylers": [
            {
                "saturation": "0"
            },
            {
                "lightness": "6"
            },
            {
                "gamma": "1"
            }
        ]
    }
    ], {
      name: 'Leonardo'
  });
  var customMapTypeId = 'custom_style';

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 28, lng: -81.946},  // Florida.
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
    }
  });




  map.mapTypes.set(customMapTypeId, customMapType);
  map.setMapTypeId(customMapTypeId);
}

Answer 1

以下是如何操作的示例。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        html, body, #map {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
        function initMap() {
            var customMapType = new google.maps.StyledMapType(
                [
                    {
                        "featureType": "all",
                        "elementType": "all",
                        "stylers": [
                            {"invert_lightness": true}, 
                            {"saturation": 10}, 
                            {"lightness": 30}, 
                            {"gamma": 0.5}, 
                            {"hue": "#435158"}
                        ]
                    }, 
                    {
                        "featureType": "water",
                        "elementType": "all",
                        "stylers": [
                            {"saturation": "0"}, 
                            {"lightness": "6"}, 
                            {"gamma": "1"}
                        ]
                    }
                ], 
                {name: 'Leonardo'}
            );
            var customMapTypeId = 'custom_style';

            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 7,
                center: {lat: 28, lng: -81.946}, // Florida.
                mapTypeControlOptions: {
                    mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
                }
            });

            var directionsService = new google.maps.DirectionsService();
            var directionsDisplay = new google.maps.DirectionsRenderer({
                map: map
            });

            var start = new google.maps.LatLng(28, -81.946);
            var end = new google.maps.LatLng(41.85, -87.65);

            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.TravelMode.DRIVING
            };

            directionsService.route(request, function(result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(result);
                }
            });

            map.mapTypes.set(customMapTypeId, customMapType);
            map.setMapTypeId(customMapTypeId);
        }

        google.maps.event.addDomListener(window, 'load', initMap);
    </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

如何使用Google Maps API显示静态方向

1 个答案: