Google Maps附近搜索(仅显示具有自动完成功能的附近选定标记) [英] Google Maps Nearby Search (Show Selected nearby markers only with autocomplete )

问题描述

我有这段代码，可以正常工作，但是我得到的只是一个问题:

I have this code, which works fine, but there is just one issue which I am getting:

当我们搜索附近的地点时，它会在新的附近搜索标记后面加上旧的标记，这些屏幕快照会附加在这些链接中.

When we search nearby places, it appends the new nearby search markers with the old markers, screenshots are attached in these links.

我在这里搜索了附近的银行: http://prntscr.com/aouxra

Here I have searched the nearby banks: http://prntscr.com/aouxra

它已经成功显示，但是现在如果我搜索附近的另一个地方(例如酒店)，它将在其标记后附加先前搜索过的bank标记，如下所示:

It has successfully shown, but now if I search another nearby place like hotel, it will append its markers with the banks markers which has been searched previously, like this:

http://prntscr.com/aouz23

我只想显示自动完成的附近搜索查询的标记.

I want to only show the markers of the autocompleted nearby search query only.

    function getNearby(lat,lng,map){

            var availableTags = [
            "hotel",
            "bank",
            "atm",
            "school",
            ];
            $( "#nearby" ).autocomplete({
                source: availableTags,
                select: function (event, ui) {              

                var request = null;

                request = {
                    location: {lat:lat, lng:lng},
                    radius: 5500,
                    types: [ui.item.value]
                };

                var service = null;
                var infowindow = null;

                infowindow = new google.maps.InfoWindow();

                service = new google.maps.places.PlacesService(map);

                service.nearbySearch(request, callback);

                //var markers = [];

                var markers = [];
                var bounds = map.getBounds()
                function callback(results, status) {


                if (status == google.maps.places.PlacesServiceStatus.OK) {


                    for (var i = 0; i < results.length; i++) 
                    {

                        createMarker(results[i]);

                        //alert(results)
                    }
                }
                }



                function createMarker(place) {

                    //markers.push(place);

                    var marker = '';
                    var placeLoc = '';

                    placeLoc = place.geometry.location;

                    marker = new google.maps.Marker({
                    map: map,
                    position: placeLoc
                    });

                    markers.push(marker);

                    google.maps.event.addListener(marker, 'click', function() {
                    infowindow.setContent(place.name);
                    infowindow.open(map, this);
                    });



                }

                 alert(markers.length);


                }
            });
    }   


    function getLocation() {

        $("#myNearby").css('display', 'block'); 

        $("#directions").css('display', 'none'); 

        $("#map").css('display', 'none'); 

        $("#panel").css('display', 'none');

        $("#load").css('display', 'none');

        $("#googleMap").css('display', 'block'); 

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else { 
            alert("Geolocation is not supported by this browser.");
            }
    }

    function showPosition(position) {

         setLocationValue(position.coords.latitude,position.coords.longitude);
         //getCurrentLocationValue(position.coords.latitude,position.coords.longitude);

         var mapProp = {
         center:new google.maps.LatLng(position.coords.latitude,position.coords.longitude),
         zoom:10,
         mapTypeId:google.maps.MapTypeId.ROADMAP
      };


        var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);


        var myMarker = new google.maps.Marker({
        position: {lat:position.coords.latitude, lng:position.coords.longitude},
        animation:google.maps.Animation.BOUNCE
        });

        myMarker.setMap(map);


        var infowindow = new google.maps.InfoWindow({
        content:"You are Located in Lat: "+position.coords.latitude+' Lng: '+position.coords.longitude
        });

        infowindow.open(map,myMarker);

        getNearby(position.coords.latitude,position.coords.longitude,map);

        <?php /*?>$("#myNearby a").click(function(){

            //alert('Working');

            var request = {
            location: {lat:position.coords.latitude, lng:position.coords.longitude},
            radius: 5500,
            types: [$("#location").val()]
            };

            infowindow = new google.maps.InfoWindow();
            var service = new google.maps.places.PlacesService(map);
            service.nearbySearch(request, callback);

            function callback(results, status) {
                if (status == google.maps.places.PlacesServiceStatus.OK) {
                    for (var i = 0; i < results.length; i++) {
                        createMarker(results[i]);
                    }
                }
            }

            function createMarker(place) {
                var placeLoc = place.geometry.location;
                var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(place.name);
                infowindow.open(map, this);
            });
            }

        });<?php */?>


    }


    function setLocationValue(lat,lng){

        var latlng = new google.maps.LatLng(lat, lng);

        var geocoder = new google.maps.Geocoder();

        geocoder.geocode({latLng: latlng}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[1]) {
                    var arrAddress = results;
                    //console.log(results);
                    $.each(arrAddress, function(i, address_component) {
                    if (address_component.types[0] == "locality") {
                        itemLocality = address_component.address_components[0].long_name;
                        //console.log("City: " + address_component.address_components[0].long_name + itemLocality);
                        $("#location").val(itemLocality);
                    }
                });
            } 
        else{
                alert("No results found");
            }
        } 
        else {
            alert("Geocoder failed due to: " + status);
        }

        });


    }

推荐答案

从地图上删除现有标记，然后再显示新标记.将markers数组设为全局，然后在getNearby的开头执行此操作:

Remove the existing markers from the map before showing the new ones. Make the markers array global, then do this at the beginning of getNearby:

for (var i=0; i<markers.length; i++) {
  markers[i].setMap(null);
}
markers = [];

这篇关于Google Maps附近搜索(仅显示具有自动完成功能的附近选定标记)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！