如何制作一种使用Google Maps API搜索特定半径范围内的项目的表单?

问题描述

我正在一个网站上，我想在Google上圈出一个圈在当前位置或一些手动地址周围进行地图绘制.

I am working on a website in which I want to make a circle on google map either around current location or some manual address.

• 用户可以选择是否要在当前位置周围转圈，还是要提供一些随机地址. (用户可以选择将手动地址放入当前位置，如下图所示)

现在，我们还需要确保圆具有特定的半径(距当前位置 0-20/70公里)，并且用户也需要确定该半径. (当前位置下方的线将决定用户可以在0-70公里左右移动的半径)

Now we also need to make sure that circle is of particular radius (0-20/70km from the current location) as well and user needs to decide that as well. (The line beneath the current location will decide the radius which users can move here and there 0-70km)

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

For example: user want to create a circle from current location till 30KM or user want to create a circle from some random address till 20KM.

我用来制作搜索半径搜索栏的HTML代码是:

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

问题陈述:

Problem Statement:

(1)我想知道我需要进行哪些更改或需要添加代码，以便在特定半径范围内搜索项目.我认为，我需要集成代码 Google地图圈子，但是我不确定该怎么做.

(1) I am wondering what changes I need to make or code I need to add so that the items are being searched around a specific radius. I think, I need to integrate the code Google Maps circle but I am not sure how I can do that.

(2)在网站上的搜索半径范围内以下选项/屏幕将出现在底部:

(2) On hit of search radius on the website the following options/screen will appear at the bottom:

推荐答案

让我们尝试为您提供一些初步的步骤，我不会编写整个应用程序的代码，而是为您提供一些有关如何解决小子问题的指南你有:

Let's try to give you some first steps, I would no code the whole app, but rather give you some guide lines in to how to solve the small subproblems that you have:

在地图上添加圆圈

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

Well, for this you have many different options for input, but the most important part is the addCircle function:

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

例如，该中心可能来自点击 :

The center could come from a click for example:

// 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)

OR by getting the position of a certain address (This is documented as well), OR whatever method (drag and drop the circle, drag the marker blablabla)

添加动态半径

好吧，如果我们知道圆形半径以米为单位，那么很容易为addCircle函数指定正确的半径.例如20km-> 20000米.因此，您只需在调用addCircle时就可以访问radius(它可以是一个参数，一个全局变量...您可以选择).

Well, if we know that the radius of the Circle is given in meters, then is very easy to give the addCircle function the correct radius. For example, 20km -> 20 000 meters. So you just have to be able to access radius when calling addCircle (it can be an argument, a global variable... your choice).

我们已经完成了绘图部分的工作，现在让我们在该圆中进行搜索.

We are done with the drawing part, lets now search within that circle.

仅获取圆圈内的标记

这里有一个先决条件，要拥有地图上的所有标记.您可能有从数据库中获得的一系列地点，或者您从Google Maps API获取标记(例如，地点搜索).

There is a prerequisite here, to have all the markers of your map. You may have an array of places that you get from a database or maybe you get the markers from Google Maps API (Place search for example).

此后，您将必须计算这些标记与给定中心之间的距离，并检查该距离是否小于半径(使用 computeDistanceBetween 非常简单)，因此您将知道哪些标记对您有效.

After that you will have to compute the distance between those markers and your given center, and check if the distance is smaller than your radius (with computeDistanceBetween is very easy), so you will know which markers are valid for you.

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;

剩下的工作应该很简单，放置标记在地图上，然后使用此信息进行任何操作.

The rest of the job should be as easy, place the markers in the map and do whatever you like with this information.

EXTRAS

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

As a further help there are a pair of examples/answers that may be useful for you:

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

Full Google Map API example, very easy step by step guide.

使用地点的半径搜索，很好回答如何进行半径搜索.

Radius search using places, a good answer in to how to do radius search.

半径搜索示例，打开F12并根据需要调试代码，但是很容易理解.

Example of radius search, open F12 and debug the code if you like, but it is easy to follow.

编辑**:我没有意识到评论中也指出了其中的2个链接.

EDIT**: I did not realize that 2 of these link where also pointed out in the comments.

这篇关于如何制作一种使用Google Maps API搜索特定半径范围内的项目的表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！