Question

我有这个代码，工作正常，但我只有一个问题：

当我们搜索附近的地方时，它会使用旧标记附加新的附近搜索标记，并在这些链接中附加屏幕截图。

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

它已成功显示，但现在如果我搜索附近的其他地方（如酒店），它会将其标记附加到之前已搜索过的银行标记，如下所示：

我只想显示自动填充的附近搜索查询的标记。

    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);
        }

        });


    }

Answer 1

在显示新标记之前从地图中删除现有标记。将markers数组设为全局，然后在getNearby：

的开头执行此操作

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

Google地图附近搜索（仅使用自动填充显示选定的附近标记）

1 个答案: