Question

我想在我的网站上添加一个谷歌嵌入地图和行车方向，我有两套起点和终点的坐标（39.5368782，-104.8778400）（39.6295396，-104.8921668）。我附上了地图的示例视图。坐标将在每页中改变

enter image description here

请帮帮我。

Answer 1

此脚本有助于实现相同的

            <!DOCTYPE html>
            <html>
              <head>
                <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
                <meta charset="utf-8">
                <title>Directions service</title>
                <style>
                  html, body, #map-canvas {
                    height: 100%;
                    margin: 0px;
                    padding: 0px
                  }
                  #panel {
                    position: absolute;
                    top: 5px;
                    left: 50%;
                    margin-left: -180px;
                    z-index: 5;
                    background-color: #fff;
                    padding: 5px;
                    border: 1px solid #999;
                  }
                </style>
                <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
                <script>
            var directionsDisplay;
            var directionsService = new google.maps.DirectionsService();
            var map;

            function initialize() {
              directionsDisplay = new google.maps.DirectionsRenderer();
              var chicago = new google.maps.LatLng(41.850033, -87.6500523);
              var mapOptions = {
                zoom:7,
                center: chicago
              };
              map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
              directionsDisplay.setMap(map);
            }

            function calcRoute() {
              var start = document.getElementById('start').value;
              var end = document.getElementById('end').value;
              var request = {
                  origin:start,
                  destination:end,
                  travelMode: google.maps.TravelMode.DRIVING
              };
              directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                  directionsDisplay.setDirections(response);
                }
              });
            }

            google.maps.event.addDomListener(window, 'load', initialize);

                </script>
              </head>
              <body>
                <div id="panel">
                <b>Start: </b>
                <select id="start" onchange="calcRoute();">
                  <option value="chicago, il">Chicago</option>
                  <option value="st louis, mo">St Louis</option>
                  <option value="joplin, mo">Joplin, MO</option>
                  <option value="oklahoma city, ok">Oklahoma City</option>
                  <option value="amarillo, tx">Amarillo</option>
                  <option value="gallup, nm">Gallup, NM</option>
                  <option value="flagstaff, az">Flagstaff, AZ</option>
                  <option value="winona, az">Winona</option>
                  <option value="kingman, az">Kingman</option>
                  <option value="barstow, ca">Barstow</option>
                  <option value="san bernardino, ca">San Bernardino</option>
                  <option value="los angeles, ca">Los Angeles</option>
                </select>
                <b>End: </b>
                <select id="end" onchange="calcRoute();">
                  <option value="chicago, il">Chicago</option>
                  <option value="st louis, mo">St Louis</option>
                  <option value="joplin, mo">Joplin, MO</option>
                  <option value="oklahoma city, ok">Oklahoma City</option>
                  <option value="amarillo, tx">Amarillo</option>
                  <option value="gallup, nm">Gallup, NM</option>
                  <option value="flagstaff, az">Flagstaff, AZ</option>
                  <option value="winona, az">Winona</option>
                  <option value="kingman, az">Kingman</option>
                  <option value="barstow, ca">Barstow</option>
                  <option value="san bernardino, ca">San Bernardino</option>
                  <option value="los angeles, ca">Los Angeles</option>
                </select>
                </div>
                <div id="map-canvas"></div>
              </body>
            </html>

https://developers.google.com/maps/documentation/javascript/examples/directions-simple

如何使用两组web坐标绘制带驾驶方向的谷歌地图

1 个答案: