如何在Google Maps API3中清除标记

Question

我想使用Google Maps API V3制作网络应用程序，我有一个地图可以显示数据库中的标记，以防我想使用下拉菜单对标记进行分类，但是当我从选项＆＃39; 1＆＃移动时39;选项＆＃39; 2＆＃39;，来自选项＆＃39; 1＆＃39;的标记。仍然显示，所以我想清除选项＆＃39; 1＆＃39;中的标记。并使用选项＆＃39; 2＆＃39;替换为标记。这是我的代码!!

<div class="container">
    <div class="well">  
    <div id="map-canvas" style="width:700px;height:400px;"></div> 
</div>

<select id = "kategori" onchange="dropdownChanged();">
   <option value ="1">Marker 1</option>
   <option value ="2">Marker 2</option>
   <option value ="3">Marker 3</option>
</select>


</div>
<script>
       //Sample code written by August Li
       var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
       new google.maps.Size(32, 32), new google.maps.Point(0, 0),
       new google.maps.Point(16, 32));
       var center = null;
       var map = null;
       var currentPopup;
       var bounds = new google.maps.LatLngBounds();

    function addMarker(lat, lng, info) {
        var pt = new google.maps.LatLng(lat, lng);
        bounds.extend(pt);
        var marker = new google.maps.Marker({
        position: pt,
        icon: icon,
        map: map
        });
        var popup = new google.maps.InfoWindow({
        content: info,
        maxWidth: 300
        });
        google.maps.event.addListener(marker, "click", function() {
        if (currentPopup != null) {
        currentPopup.close();
        currentPopup = null;
        }
        popup.open(map, marker);
        currentPopup = popup;
        });
        google.maps.event.addListener(popup, "closeclick", function() {
        map.panTo(center);
        currentPopup = null;
        });
    }

   function initMap() {
       map = new google.maps.Map(document.getElementById("map-canvas"), {
       center: new google.maps.LatLng(0, 0),
       zoom: 14,

       mapTypeId: google.maps.MapTypeId.ROADMAP,
       mapTypeControl: false,
       mapTypeControlOptions: {
       style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
       },
       navigationControl: true,
       navigationControlOptions: {
       style: google.maps.NavigationControlStyle.SMALL
       }
       });


       center = bounds.getCenter();
       map.fitBounds(bounds);

   }

    function dropdownChanged()
    {
        var index = document.getElementById("kategori").value;
        if (index == 1) {
          <?php 
           $keterangan = $this->mdestinasi->getby_kategori(1);            
            foreach($keterangan->result() as $row){
           $nama=$row->nama_destinasi;
           $lat=$row->lat;
           $long=$row->long; 
           echo ("addMarker($lat, $long,'<b>$nama</b><br>');\n");
           }        
            ?>


        } else if (index == 2 ){

        <?php 
        $keterangan = $this->mdestinasi->getby_kategori(2);            
        foreach($keterangan->result() as $row){
        $nama=$row->nama_destinasi;
        $lat=$row->lat;
        $long=$row->long; 
        echo ("addMarker($lat, $long,'<b>$nama</b><br>');\n");
        }        
        ?>

        } else {
         <?php 
         $keterangan = $this->mdestinasi->getby_kategori(2);            
         foreach($keterangan->result() as $row){
          $nama=$row->nama_destinasi;
         $lat=$row->lat;
         $long=$row->long; 
         echo ("addMarker($lat, $long,'<b>$nama</b><br>');\n");
         }        
         ?>
        }

    }
 </script>

如何解决我的问题，当我在下拉列表中选择每个选项时，如何更换/清除标记。我希望你能解决它，对不起我的英语。感谢..

Answer 1

通过调用marker.setMap(null)从地图中删除标记。

这会将标记的map属性重置为null，将其从任何地图中删除。

在这种情况下，您应该跟踪标记，以便以后删除它们：

<div class="container">
    <div class="well">  
    <div id="map-canvas" style="width:700px;height:400px;"></div> 
</div>

<select id = "kategori" onchange="dropdownChanged();">
   <option value ="1">Marker 1</option>
   <option value ="2">Marker 2</option>
   <option value ="3">Marker 3</option>
</select>


</div>
<script>
       //Sample code written by August Li
       var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
       new google.maps.Size(32, 32), new google.maps.Point(0, 0),
       new google.maps.Point(16, 32));
       var center = null;
       var map = null;
       var currentPopup;
       var bounds = new google.maps.LatLngBounds();

       // to store markers
       var markerList = [];

    function addMarker(lat, lng, info) {
        var pt = new google.maps.LatLng(lat, lng);
        bounds.extend(pt);
        var marker = new google.maps.Marker({
        position: pt,
        icon: icon,
        map: map
        });

        // store marker in list
        markerList.push(marker);

        var popup = new google.maps.InfoWindow({
        content: info,
        maxWidth: 300
        });
        google.maps.event.addListener(marker, "click", function() {
        if (currentPopup != null) {
        currentPopup.close();
        currentPopup = null;
        }
        popup.open(map, marker);
        currentPopup = popup;
        });
        google.maps.event.addListener(popup, "closeclick", function() {
        map.panTo(center);
        currentPopup = null;
        });
    }

   function initMap() {
       map = new google.maps.Map(document.getElementById("map-canvas"), {
       center: new google.maps.LatLng(0, 0),
       zoom: 14,

       mapTypeId: google.maps.MapTypeId.ROADMAP,
       mapTypeControl: false,
       mapTypeControlOptions: {
       style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
       },
       navigationControl: true,
       navigationControlOptions: {
       style: google.maps.NavigationControlStyle.SMALL
       }
       });


       center = bounds.getCenter();
       map.fitBounds(bounds);

   }

    function dropdownChanged()
    {
        // clears all markers before adding new one
        for (var i = 0; i < markerList.length; i++) {
          markerList[i].setMap(null);
        };
        // clears marker list
        markerList = [];

        var index = document.getElementById("kategori").value;
        if (index == 1) {
          <?php 
           $keterangan = $this->mdestinasi->getby_kategori(1);            
            foreach($keterangan->result() as $row){
           $nama=$row->nama_destinasi;
           $lat=$row->lat;
           $long=$row->long; 
           echo ("addMarker($lat, $long,'<b>$nama</b><br>');\n");
           }        
            ?>


        } else if (index == 2 ){

        <?php 
        $keterangan = $this->mdestinasi->getby_kategori(2);            
        foreach($keterangan->result() as $row){
        $nama=$row->nama_destinasi;
        $lat=$row->lat;
        $long=$row->long; 
        echo ("addMarker($lat, $long,'<b>$nama</b><br>');\n");
        }        
        ?>

        } else {
         <?php 
         $keterangan = $this->mdestinasi->getby_kategori(2);            
         foreach($keterangan->result() as $row){
          $nama=$row->nama_destinasi;
         $lat=$row->lat;
         $long=$row->long; 
         echo ("addMarker($lat, $long,'<b>$nama</b><br>');\n");
         }        
         ?>
        }

    }
 </script>