删除谷歌地图地方服务中的标记答案

【问题标题】：Removing Markers In google Maps Places Services删除谷歌地图地方服务中的标记
【发布时间】：2013-10-17 10:18:00
【问题描述】：

当我点击银行时，所有银行图标都会出现，当我点击停车和商店时，会出现必填字段。

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

<!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>

【问题讨论】：

标签： javascript html google-maps-api-3

【解决方案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)

【讨论】：

非常感谢 :) 完美运行 :)
我还有一个查询如何将请求的半径设置为用户定义的！即在功能停车中，我已将半径预定义为 500 如何使其成为用户定义？
function park() { var request = { location: myCenter, radius: 500, types: ['parking'] }} --- 在此假设用户将半径指定为 1000 个停车区1000 的半径应该是可见的！
用户如何给半径？我假设文本输入或下拉或其他一些 HTML 输入。您在获得该价值并使用它时遇到了什么问题？文档中有一些例子可以做到这一点......
我现在明白了。我未能添加输入标签。现在完美运行

【解决方案2】：

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

marker.setMap(null);

【讨论】：