Question

当我在银行中点击所有银行图标上架时，当我点击停车并存储时，会显示所需的字段。

我的问题是当我点击停车时，其他标记应该不可见。

<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?          v=3.exp&sensor=true&libraries=places"></script>
<script>
    var marker;
    var map;
    var infowindow = new google.maps.InfoWindow();
    var myCenter;
    function initialize() 
    {
        myCenter = new google.maps.LatLng(13.052413899999994,80.25065293862303);        
        map = new google.maps.Map(document.getElementById('map-canvas'), {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: myCenter,
            zoom: 15
        });
    }

    function some()
    {
        var request = {
        location: myCenter,
        radius: 500,
        types: ['bank']
    };

    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;
        marker = new google.maps.Marker({
            position: place.geometry.location
        });
        marker.setIcon({
            url:'bank.png',
            size: new google.maps.Size(70, 71),
            anchor: new google.maps.Point(17, 14),
            scaledSize: new google.maps.Size(35, 35)
        });

        marker.setMap(map);

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

function parking()
{       
    var request = {
        location: myCenter,
        radius: 500,
        types: ['parking']
            };

    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;
    marker = new google.maps.Marker({
    position: place.geometry.location
    });
    marker.setIcon({
    url:'parking.png',
    size: new google.maps.Size(70, 71),
    anchor: new google.maps.Point(17, 14),
    scaledSize: new google.maps.Size(35, 35)
    });

    marker.setMap(map);

    google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
    });
    }  
    }
function stores()
    {
        var request = {
        location: myCenter,
        radius: 1000,
        types: ['store']
    };
        var populationOptions = {
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        center: myCenter,
        radius: 1000
        };

var cityCircle = new google.maps.Circle(populationOptions);
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;
    marker = new google.maps.Marker({
    position: place.geometry.location
    });
    marker.setIcon({
    url:'store.png',
    size: new google.maps.Size(70, 71),
    anchor: new google.maps.Point(17, 14),
    scaledSize: new google.maps.Size(35, 35)
    });

    marker.setMap(map);

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


google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="map-canvas" style="width: 50%; float:left"></div>
<div style="width:46%; float:left">
<button onclick="some();">Banks</button>
<button onclick="parking();">Parking</button>
<button onclick="stores();">Store</button>

 </body>
</html>

Answer 1

将标记保存在数组中。重新运行查询时，处理该数组，通过将其map属性设置为null来隐藏标记，然后删除它们。以下相关变化。

var markers = [];
function createMarker(place)
{
    var placeLoc = place.geometry.location;
    marker = new google.maps.Marker({
        position: place.geometry.location
    });
    marker.setIcon({
        url:'bank.png',
        size: new google.maps.Size(70, 71),
        anchor: new google.maps.Point(17, 14),
        scaledSize: new google.maps.Size(35, 35)
    });

    marker.setMap(map);

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

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

working example (without your custom icons)

Answer 2

在显示停车标记之前，请通过以下行删除库标记。

marker.setMap(null);

在Google Maps Maps服务中删除标记

2 个答案: