时间戳

首页 > 解决方案 > 如何使用google maps JS api从给定的经纬度坐标中找到半径（比如10米）的坐标（纬度和经度）

javascript - 如何使用google maps JS api从给定的经纬度坐标中找到半径（比如10米）的坐标（纬度和经度）

问题描述

我有一条折线，点击它我需要更改它的颜色并将周围（比如 10 米）折线的颜色更改为蓝色。单击其他折线时，我需要将其设置为绿色，并且需要将之前单击的折线恢复为红色。

我可以更改单击的折线的颜色并在单击其他时恢复为原始红色，但是如何找出半径为 10 米的选定折线的周围折线。

下面是我的代码：

let polylines = [];
var prev_path;
let poly = new google.maps.Polyline({
        path: latlng_array,
        geodesic: true,
        strokeWeight: 3,
        strokeColor: 'red',
        object_id: feature.id
    });
    poly.setMap(map);

poly.addListener('click', function(event) {
            this.setOptions({
                strokeColor: 'green'
            });
            if (prev_path) {
                prev_path.setOptions({
                    strokeColor: 'red'
                });
            }
            prev_path = this;
polylines.push(poly);

这是我的演示https://jsfiddle.net/hellraizer/2kt508yo/

标签： javascriptuser-interfacegoogle-maps-api-3

解决方案

我认为你应该使用Helper 函数来检测交叉点

intersectsCircle是检测polyline和polyline（与您的半径）之间的交叉点的辅助函数

编辑

下面摆弄你的代码，yellow如果它在10m半径内，它将设置所有行black

更新的小提琴

以下是当您单击半径 内Polyline附近的检查时的逻辑。polyline10m

var radius = 10;
  polylines.forEach((poly) => {

    if (poly.intersectsCircle(selectedpoly, radius)) {
      color = '#FF0';
    } else {
      color = '#000';
    }
    poly.setOptions({
      strokeColor: color
    });

  })

}

推荐阅读