如何使用google maps API制作搜索特定半径周围项目的表单？

Question

我正在一个网站上工作,我想在Google地图上围绕当前位置或某个手动地址制作一个圆圈.

• 用户可以选择是否要围绕当前位置或他们将提供的随机地址进行圈选.(用户可以选择将手动地址放在当前位置,如下图所示)

• 现在我们还需要确保圆圈具有特定的半径(距当前位置0-20/70km),用户也需要确定它.(当前位置下方的线将决定用户可在此处移动的半径0-70km)

例如:用户想要从当前位置创建一个圆圈直到30KM,或者用户想要从一些随机地址创建一个圆圈直到20KM.

我用来制作搜索范围搜索栏的HTML代码是:

<div class="input-searchradius">
   <input class="form-control search_radius mb-4" type="text" placeholder="search radius">
</div>

问题陈述:

(1)我想知道我需要进行哪些更改或需要添加的代码,以便围绕特定半径搜索项目.我想,我需要整合代码谷歌地图圈子,但我不知道我该怎么做.

(2)在网站上搜索半径命中时,底部会显示以下选项/屏幕:

Answer 1

让我们尝试为您提供一些第一步，我不会编写整个应用程序的代码，而是为您提供一些有关如何解决您遇到的小子问题的指导方针：

在地图中添加圆圈

好吧，为此你有许多不同的输入选项，但最重要的部分是 addCircle 函数：

function addCircle(center){
    circle = new google.maps.Circle({
        map: map, //The existing map
        center: center,
        radius: 200, //This will be modified afterwards
        zindex: 100
    });
}

例如，中心可能来自点击：

// Area is wherever you want to attach the click, either a polygon, a map...
google.maps.event.addListener(area, "click", function(event) {
        addCircle(event.latLng);
});

或者通过获取某个地址的位置（这也有记录），或者任何方法（拖放圆圈，拖动标记blablabla）

添加动态半径

好吧，如果我们知道Circle 的半径是以米为单位给出的，那么很容易为 addCircle 函数提供正确的半径。例如，20 公里 -> 20 000 米。所以你只需要能够在调用 addCircle 时访问半径（它可以是一个参数，一个全局变量......你的选择）。

我们完成了绘图部分，现在让我们在该圆圈内搜索。

仅获取圆圈内的标记

这里有一个先决条件，即拥有地图的所有标记。您可能拥有从数据库中获取的一系列地点，或者从 Google Maps API 中获取标记（例如地点搜索）。

之后，您必须计算这些标记与给定中心之间的距离，并检查距离是否小于您的半径（使用computeDistanceBetween非常简单），这样您就会知道哪些标记对您有效。

const markers = [//array of my valid markers with position];
markers.filter( (marker) => 
    google.maps.geometry.spherical.computeDistanceBetween(marker.getPosition(), center.getPosition()) < radius; // Filter the markers which distance is bigger than radius;

剩下的工作应该很简单，将标记放在地图上，然后根据这些信息做任何你想做的事情。

附加功能

作为进一步的帮助，有一对示例/答案可能对您有用：

完整的 Google Map API 示例，非常简单的分步指南。

使用地点进行半径搜索，这是如何进行半径搜索的一个很好的答案。

半径搜索示例，如果您愿意，可以打开 F12 并调试代码，但很容易遵循。

编辑**：我没有意识到这些链接中的 2 个也在评论中指出。