谷歌地图api在我的地址中最接近我

时间:2017-08-06 21:59:04

标签: google-maps google-maps-api-3 google-api google-api-java-client

我正在写一个网站,显示我们的商店附近的地址。我有一个服务的每个商店的纬度和经度位置列表。我找到了我的位置并标记了商店。但我找不到最近的商店到我的位置。你能帮帮我吗? :)

enter image description here

 function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            center: new google.maps.LatLng(40.188528, 29.060964),
            zoom: 10
        });
        var infoWindow = new google.maps.InfoWindow;

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                infoWindow.setPosition(pos);
                infoWindow.setContent('Location found.');
                infoWindow.open(map);
            }, function() {
                handleLocationError(true, infoWindow, map.getCenter());
            });
        } else {
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
        }
        
        downloadUrl('locations.xml', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
                var id = markerElem.getAttribute('id');
                var name = markerElem.getAttribute('name');
                var address = markerElem.getAttribute('address');
                var type = markerElem.getAttribute('type');
                var point = new google.maps.LatLng(
                    parseFloat(markerElem.getAttribute('lat')),
                    parseFloat(markerElem.getAttribute('lng')));

                var infowincontent = document.createElement('div');
                var strong = document.createElement('strong');
                strong.textContent = name
                infowincontent.appendChild(strong);
                infowincontent.appendChild(document.createElement('br'));

                var text = document.createElement('text');
                text.textContent = address
                infowincontent.appendChild(text);
                var icon = customLabel[type] || {};
                var marker = new google.maps.Marker({
                    map: map,
                    position: point,
                    label: icon.label
                });
                marker.addListener('click', function() {
                    infoWindow.setContent(infowincontent);
                    infoWindow.open(map, marker);
                });
            });
        });
    }

<markers>
<marker id="1" name="Pronet" address="Altınşehir Mahallesi, Muammer Aksoy Cd. No:45, 16120 Nilüfer/Bursa" lat="40.227127" lng="28.924318" type="Ajans"/>
<marker id="2" name="Nette" address="Fethiye Mahallesi, Bursa Cd No:1, 16140 Başiskele/Bursa" lat="40.227173" lng="28.979762" type="Ajans"/>
<marker id="3" name="Alivre" address="Osmangazi Mahallesi, Altıparmak Caddesi, No:86 Stad İş Merkezi K:6 D:15, 16050 Osmangazi/Bursa" lat="40.190341" lng="29.050251" type="Ajans"/>

1 个答案:

答案 0 :(得分:1)

您可以使用此功能查找您所在位置附近最近的标记:

function rad(x) { return x * Math.PI / 180; }
function find_closest_marker(position) {
    var lat = position.lat;
    var lng = position.lng;
    var R = 6371; // radius of earth in km
    var distances = [];
    var closest = -1;
    for (i = 0; i < gmarkers.length; i++) {
        if (gmarkers[i]) {
            var mlat = gmarkers[i].position.lat();
            var mlng = gmarkers[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;

            }
        }
    }

    return (closest);

}

但是,初始化标记时,可以将它们放在如下的数组标记中:

markers.push (newMarker);

您可以使用以下功能:

var closestMarker = find_closest_marker (yourPosition);

closestMarker=markers[closestMarker];

函数find_closest_marker返回数组markers中最近的大小写。

如果您有任何疑问,请告诉我。