Google Maps API - 最近的标记功能更改为最近的n个标记 [英] Google Maps API - Closest marker function change to closest n markers

查看:70
本文介绍了Google Maps API - 最近的标记功能更改为最近的n个标记的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用此问题中的公式找到地图上距离当前位置最近的标记。我想修改这个公式,以便找到最近的5个地点,最近的10个地点等最近的地点 n ,我不确定如何完成

以下是我正在使用的修改后的公式:

 函数rad(x){return x * Math.PI / 180;} 
函数find_closest_marker(center,map){
var lat = center.lat();
var lng = center.lng();
var R = 6371; //以公里为单位的地球半径
var距离= [];
var closest = -1;
for(i = 0; i< markers.length; i ++){
var mlat = markers [i] .position.lat();
var mlng = markers [i] .position.lng();
var dLat = rad(mlat - lat);
var dLong = rad(mlng - lng);数学公式(dLat / 2)+
Math.cos(rad(lat))* Math.cos(rad(lat))* Math .sin(dLong / 2)* Math.sin(dLong / 2);
var c = 2 * Math.atan2(Math.sqrt(a),Math.sqrt(1-a));
var d = R * c;
距离[i] = d;
if(nearest == == || d< distance [nearest]){
nearest = i;
}
}

//记录最近记号的标题
console.log(markers [closest] .title);
}

以下是我如何加载标记:

  //将标记添加到地图
函数setMarkers(center,map){
var json =(function(){
$ b $ .ajax({
'async':false,
'global':false,
'url':js / data.json ,$ b $'dataType':json,
'success':function(data){
json = data;
}
});
返回json;
})();
//遍历每个json元素
for(var i = 0,length = json.length; i< length; i ++){
var data = json [i],
latLng = new google.maps.LatLng(data.lat,data.lon);
//创建一个标记并将其放置在地图上
var icon ='assets / marker.png';
var marker = new google.maps.Marker({
position:latLng,
map:map,
icon:icon,
title:data.loc
});
markers.push(marker);
infoBox(地图,标记,数据);




$ b $ p
$ b

如何进一步修改公式以便它找到最接近的 n 标记数量而不是单个最接近的一个? p>您可以使用 findClosestN 函数(更改 gmarkers 标记,更改了这个问题)函数返回最接近数组限制为numberOfResults元素)

 函数findClosestN (pt,numberOfResults){
var closest = [];
for(var i = 0; i< markers.length; i ++){
markers [i] .distance = google.maps.geometry.spherical.computeDistanceBetween(pt,markers [i] .getPosition ());
markers [i] .setMap(null);
closest.push(markers [i]);
}
closest.sort(sortByDist);
返回closest.splice(0,numberOfResults);


函数sortByDist(a,b){
return(a.distance - b.distance)
}

概念证明小提琴

I am using the formula found in this question to find the closest marker on the map to the current position. I would like to modify this formula so that it finds the closet n number of locations(closest 5 locations, closest 10 locations, etc.) and I am not sure how to accomplish this.

Here is the modified formula I am using:

function rad(x) {return x*Math.PI/180;}
function find_closest_marker(center, map) {
    var lat = center.lat();
    var lng = center.lng();
    var R = 6371; // radius of earth in km
    var distances = [];
    var closest = -1;
    for( i=0;i<markers.length; i++ ) {
        var mlat = markers[i].position.lat();
        var mlng = markers[i].position.lng();
        var dLat  = rad(mlat - lat);
        var dLong = rad(mlng - lng);
        var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.cos(rad(lat)) * Math.cos(rad(lat)) * Math.sin(dLong/2) * Math.sin(dLong/2);
        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
        var d = R * c;
        distances[i] = d;
        if ( closest == -1 || d < distances[closest] ) {
            closest = i;
        }
    }

    //Log title of closest marker
    console.log(markers[closest].title);
}

Here is how I am loading the markers:

// Add markers to the map
function setMarkers(center, map) {
    var json = (function () { 
        var json = null; 
        $.ajax({ 
            'async': false, 
            'global': false, 
            'url': "js/data.json", 
            'dataType': "json", 
            'success': function (data) {
                 json = data; 
             }
        });
        return json;
    })();
    // Loop over each of the json elements
    for (var i = 0, length = json.length; i < length; i++) {
        var data = json[i],
        latLng = new google.maps.LatLng(data.lat, data.lon);
        // Create a marker and place it on the map
        var icon = 'assets/marker.png';
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            icon: icon,
            title: data.loc
        });
        markers.push(marker);
        infoBox(map, marker, data);
    }
}

How can I modify the formula further so that it finds the closest n number of markers rather than just the single closest one?

解决方案

You could use the (slightly modified) findClosestN function from this question (changed gmarkers to markers, changed the function to return the closest array limited to numberOfResults elements)

function findClosestN(pt, numberOfResults) {
    var closest = [];
    for (var i = 0; i < markers.length; i++) {
        markers[i].distance = google.maps.geometry.spherical.computeDistanceBetween(pt, markers[i].getPosition());
        markers[i].setMap(null);
        closest.push(markers[i]);
    }
    closest.sort(sortByDist);
    return closest.splice(0,numberOfResults);
}

function sortByDist(a, b) {
    return (a.distance - b.distance)
}

proof of concept fiddle

这篇关于Google Maps API - 最近的标记功能更改为最近的n个标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆