json - Filter Google Maps Markers based on Distance

问题描述

I am looking at filtering google maps markers based on distance from the users current location. I have this set up to bring in markers from a database and display on a map, but I want to limit the display of these markers to only show markers with 3 miles of the users current location.

I receive the markers in JSON form (with lat+long detail) as follows:

function showMarkers(str) {
            if (str == "") {
                document.getElementById("products").innerHTML = "";
                return;
            }
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else { // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    //$('#mapMarkerPositions').html(this.responseText);

                    let data = JSON.parse(this.responseText);
                    merchantMarkers = [];
                    for (let i = 0; i < data.length; i++) {
                        merchantMarkers[i] = data[i];
                    }
                    resetMarker();
                    reloadMarkers();


                }
            }
            xmlhttp.open("GET", "filterMarkers.php?s=" + str, true);
            xmlhttp.send();
        }

A sample of the JSON received:

0: [,…]
0: "<a style="margin-left: 8px; font-weight: bold; font-family: Courier, Arial, Helvetica, sans-serif;">TestMerchant1</a><br>
↵   <button class="seeMerchantButton" onclick="showMerchant('TestMerchant1');showProfile();" value="TestMerchant1">See merchant</button>"
1: "51.503366"
2: "-0.223477"
3: "info"
4: {text: "£5", fontFamily: "Courier, Arial, Helvetica, sans-serif"}
fontFamily: "Courier, Arial, Helvetica, sans-serif"
text: "£5"
1: [,…]
0: "<a style="margin-left: 8px; font-weight: bold; font-family: Courier, Arial, Helvetica, sans-serif;">TestMerchant2</a><br>
↵   <button class="seeMerchantButton" onclick="showMerchant('TestMerchant2');showProfile();" value="TestMerchant2">See merchant</button>"
1: "51.503393"
2: "-0.226599"
3: "info"
4: {text: "£3", fontFamily: "Courier, Arial, Helvetica, sans-serif"}
fontFamily: "Courier, Arial, Helvetica, sans-serif"
text: "£3"

I centre the map on the users location as follows:

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                    map.setCenter(initialLocation);
                });
            }

I assume the most efficient way to deal with this is through filtering the JSON, but I don't even know where to start here as I am new to the Google Maps API? I believe applying haversine formula methodology could work there, but again, not sure how this would work?

Any help appreciated, thanks!

标签： jsongoogle-mapsgoogle-maps-api-3google-maps-markershaversine

json - Filter Google Maps Markers based on Distance

问题描述

解决方案

推荐阅读