javascript - 在两点之间的每个交汇处放置标记并获取它们的坐标-6ren

javascript - 在两点之间的每个交汇处放置标记并获取它们的坐标

转载作者：行者123 更新时间：2023-12-03 11:17:33

我正在尝试获取 2 点之间的驾驶 route 涉及的路口数量，但我得到的答案是 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，因此我不是这方面的专家。我们将非常感谢您的帮助。

最佳答案

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

工作代码片段:

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>

关于javascript - 在两点之间的每个交汇处放置标记并获取它们的坐标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27266481/

文章推荐： javascript - 正则表达式来匹配这个重复模式？

文章推荐： javascript - 通过谷歌地图javascript中的函数构建多个多边形

文章推荐： javascript - 通过 http 发送音频文件

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在两点之间的每个交汇处放置标记并获取它们的坐标