在两个点之间的每个交汇点上放置标记并获得它们的坐标

时间:2014-12-03 08:02:03

标签: javascript google-maps google-maps-api-3

我试图获得2点之间驾驶路线中涉及的交叉点数量,但我得到0有答案。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="FYP.WebForm1" %>

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Directions service</title>
    <style>
      #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"></script>
    <script>

        var directionsService;
        var markerArray = [];

        function initialize() {
            // Instantiate a directions service.         
            directionsService = new google.maps.DirectionsService();
        }

        function calcRoute() {

            // First, remove any existing markers from the map.
            for (var i = 0; i < markerArray.length; i++) {
                markerArray[i].setMap(null);
            }

            // Now, clear the array itself.
            markerArray = [];

            // Retrieve the start and end locations and create
            // a DirectionsRequest using DRIVING directions.

            var request = { 
                origin: "33.688782,72.980038",
                destination: "33.689023,72.982422",
                travelMode: google.maps.TravelMode.DRIVING
            };

            // Route the directions and use the response
            directionsService.route(request, function (response, status) {

                if (status == google.maps.DirectionsStatus.OK) {

                    var warnings = document.getElementById('warnings_panel');
                    warnings.innerHTML = '<b>' + response.routes[0].warnings + '</b>';

                    //   directionsDisplay.setDirections(response);

                    var myRoute = response.routes[0].legs[0];    

                    for (var i = 0; i < myRoute.steps.length; i++) {
                        var marker = new google.maps.Marker({
                            position: myRoute.steps[i].start_location,
                            map: map
                        });

                        markerArray[i] = marker;
                    }
                }
            });    
            alert("Length= " + markerArray.length);
        }

   </script>
  </head>
  <body onload="initialize();">
    <div id="panel">

    <button id="button1" onclick="calcRoute();" runat="server">Get Markers Count</button>
    </div>
    &nbsp;
    <div id="warnings_panel" style="width:100%;height:10%;text-align:center"></div>
  </body>
</html>

我两天前开始使用google map api和javascript,因此我不是专家。我们将非常感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

directionsService是异步的。在结果返回之前,您正在调用alert。除了至少一个javascript错误(地图未在您的代码中定义)。

工作代码段:

var directionsService;
var markerArray = [];

function initialize() {
  // Instantiate a directions service.         
  directionsService = new google.maps.DirectionsService();
}
google.maps.event.addDomListener(window, 'load', initialize);


function calcRoute() {

  // First, remove any existing markers from the map.
  for (var i = 0; i < markerArray.length; i++) {
    markerArray[i].setMap(null);
  }

  // Now, clear the array itself.
  markerArray = [];

  // Retrieve the start and end locations and create
  // a DirectionsRequest using DRIVING directions.

  var request = {
    origin: "33.688782,72.980038",
    destination: "33.689023,72.982422",
    travelMode: google.maps.TravelMode.DRIVING
  };

  // Route the directions and use the response
  directionsService.route(request, function(response, status) {

    if (status == google.maps.DirectionsStatus.OK) {

      var warnings = document.getElementById('warnings_panel');
      warnings.innerHTML = '<b>' + response.routes[0].warnings + '</b>';

      // directionsDisplay.setDirections(response);

      var myRoute = response.routes[0].legs[0];

      for (var i = 0; i < myRoute.steps.length; i++) {
        var marker = new google.maps.Marker({
          position: myRoute.steps[i].start_location,
          // map: map
        });

        markerArray[i] = marker;
      }
    }
    alert("Length= " + markerArray.length);
  });
}
#panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="panel">

  <button id="button1" onclick="calcRoute();" runat="server">Get Markers Count</button>
</div>
&nbsp;
<div id="warnings_panel" style="width:100%;height:10%;text-align:center"></div>