如何从Google地图中删除单个标记 [英] how to remove a single marker from google map

查看:135
本文介绍了如何从Google地图中删除单个标记的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述


$ b $我正在Google Maps上工作b

 < html> 
< head>
< meta name =viewportcontent =initial-scale = 1.0,user-scalable = no>
< meta charset =utf-8>
< title> MapsApi< / title>

< style>
#map_canvas {
width:100%;
height:500px;
背景颜色:#CCC;
}

#menu_bar {
width:100%;
height:150px;
位置:绝对;
bottom:0px;
背景颜色:#CCC;
border-top:1px纯红色;
}
body {
padding:0px;
margin:0px;

}
< / style>
< script src =https://maps.googleapis.com/maps/api/js?sensor=false>< / script>
< script type =text / javascript>
var map;
var markers = [];
函数initialize(){
var myLatlng = new google.maps.LatLng(44.5403,-78.5463);
var mapOptions = {
zoom:4,
center:myLatlng
}
var map = new google.maps.Map(document.getElementById('map_canvas')) ,mapOptions);

google.maps.event.addListener(map,'click',function(event){
addMarker(event.latLng);
});


//添加标记位置
函数addMarker(位置){
var marker = new google.maps.Marker({
position:location ,
map:map
});
google.maps.event.addListener(marker,'click',function(event){
this.setMap(null);
});

markers.push(marker);
}

//设置数组中所有标记的映射。
函数setAllMap(map){
for(var i = 0; i< markers.length; i ++){
markers [i] .setMap(map);


}
}




}

google.maps .event.addDomListener(窗口,'load',初始化);

< / script>


< / head>

< body>
< div id =map_canvas>< / div>
< div id =menu_bar>
< / div>



< / body>
< / html>

但是现在有个问题,我应该如何设置markers.push(marker)的值,因为我已经删除了一个标记,所以它的值必须小于预期的值。可以帮助解决方案

您不会从标记数组中删除标记。你所要做的就是识别你想要从地图中移除的标记,然后使用 setMap(null)

 标记物[indexOfMarker] .setMap(空); 

通过这种方式,您可以在某些时候添加标记:

 标记[indexOfMarker] .setMap(map); 


I am working on google maps i am trying to add markers to a google map and then tried to remove it but now as i have done both adding and removing with the code below

    <html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
<title>MapsApi</title>

<style>
      #map_canvas {
        width: 100%;
        height: 500px;
        background-color: #CCC;
      }

      #menu_bar{
        width: 100%;
        height: 150px;
        position:absolute;
        bottom:0px;
        background-color: #CCC;
        border-top:1px solid red;
      }
      body{
        padding:0px;
        margin:0px;

      }
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var markers = [];
 function initialize() {
  var myLatlng = new google.maps.LatLng(44.5403, -78.5463);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    google.maps.event.addListener(map, 'click', function(event) {
        addMarker(event.latLng);
      });


    // add marker to positon
    function addMarker(location) {
         var marker = new google.maps.Marker({
                position: location,
                map: map
            });
    google.maps.event.addListener(marker, 'click', function(event) {
        this.setMap(null);
        });

         markers.push(marker);
    }

    // Sets the map on all markers in the array.
        function setAllMap(map) {
          for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(map);


          }
        }




}

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

</script>


</head>

<body>
<div id="map_canvas"></div>
<div id="menu_bar">
</div>



</body>
</html>

but here is a problem now how should i set the value of markers.push(marker) because as i have removed one marker so its value must be less than its expected stored.. can any one help

解决方案

The easier answer is that you don't remove the marker from the markers array. All you do is identify the marker you want to remove from the map and then use setMap(null).

markers[indexOfMarker].setMap(null);

This way you can use the following if you want to add the marker back at some point:

markers[indexOfMarker].setMap(map);

这篇关于如何从Google地图中删除单个标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆