相关疑难解决方法(0)

我正在一个网站上工作,我想在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)在网站上搜索半径命中时,底部会显示以下选项/屏幕:

好的,我在测试网站上设置了一个地图和一个自动填充字段.

我的目标是让用户将他/她的地址输入到该字段中,然后当他/她点击确认根据提供的信息确定最近的商店.

我有每个商店的lat/long,并且在自动完成的帮助下,我现在有lat/long的用户地址但是当我使用文档中提供的computeDistanceBetween方法时,我得到NaN而不是期望的结果.

这是测试网站的链接,以获得一个想法 - http://dev.touch-akl.com/map/

以下是我到目前为止所尝试的内容

    //----------------------------------------------------------------
    //--- Search Box -------------------------------------------------

    var input = document.getElementById('address');
    var $confirm = $('#confirm');

    var options = {
       types: ['geocode'],
       componentRestrictions: {country: 'nz'}//Turkey only
    };        

    var autocomplete = new google.maps.places.Autocomplete(input,options);
    autocomplete.bindTo('bounds', map);

    $confirm.click(function(){

        var _street = $('#address').val();
        var place = autocomplete.getPlace();
        var _coordinates = place.geometry.location.toString();
        var _delivery = _coordinates.substring(1, _coordinates.length - 1);
        var _kCord = '-36.874694,174.735292';
        var _pCord = '-36.858317,174.782284'

        console.log(_coordinates);
        console.log(_delivery);

        console.log(google.maps.geometry.spherical.computeDistanceBetween(_pCord, _delivery));
        console.log(google.maps.geometry.spherical.computeDistanceBetween(_kCord, _delivery));


    });