首页 > 解决方案 > 使用google api测量3个标记之间的距离

问题描述

我正在使用 react js,并且从用户输入中获取坐标。现在我想计算这些坐标之间的总距离(以英里为单位)。例如 51.5035914、-0.1193578 51.5031346、-0.1193844 51.5038217、-0.1282733

所以a点到b点+b点到c点的距离。

PS。在上面的例子中,我只添加了 3 点,但它可以是 30 或更多

标签: javascriptreactjsgoogle-maps

解决方案


如果您想获得在您的坐标之间行驶的距离和持续时间,您可以使用Google Maps Platform API 的Distance Matrix API

为此,您可以首先在一个距离矩阵请求中获取点 A 和点 B 之间的距离/持续时间,并将其存储在变量中。然后在另一个请求中获取点 B 和点 C 之间的距离/持续时间,并将其添加到同一个变量中。

这是显示距离矩阵请求的代码片段:

    var service = new google.maps.DistanceMatrixService;
    var orig = this.state.input;
    var dest = this.state.destination;

    service.getDistanceMatrix({
          origins: [orig],
          destinations: [dest],
          travelMode: 'DRIVING',
          unitSystem: google.maps.UnitSystem.METRIC,
          avoidHighways: false,
          avoidTolls: false
        }, (response, status) => {
          if (status !== 'OK') { 
            alert('Error was: ' + status);
          } else {
            var origins = response.originAddresses;
            var destinations = response.destinationAddresses;

            //Loop through the elements row to get the value of duration and distance
            for (var i = 0; i < origins.length; i++) {
              var results = response.rows[i].elements;
              for (var j = 0; j < results.length; j++) {
              var element = results[j];
              var distanceString = element.distance.text;
              var durationString = element.duration.text;

              //add new value to the previousValue 
              this.setState ({
                distance: this.state.distance + parseInt(distanceString, 10)
                });
              console.log(this.state.distance);
              this.setState ({
                duration: this.state.duration + parseInt(durationString, 10)
                });
                console.log(this.state.duration);
               }
             }
          }
          });

希望这可以帮助!


推荐阅读