Javascript 如何清除谷歌地图API3中的标记_Javascript_Google Maps_Google Maps Api 3

Javascript 如何清除谷歌地图API3中的标记

javascript google-maps google-maps-api-3

Javascript 如何清除谷歌地图API3中的标记,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我想使用Google Maps API V3制作web应用程序，我有一个地图可以显示数据库中的标记，以防我想使用下拉菜单对标记进行分类，但当我从选项“1”移动到选项“2”时，选项“1”中的标记仍会显示，因此，我想清除选项“1”中的标记，并用选项“2”替换为标记。这是我的密码 <div class="container"> <div class="well"> <div id="map-canvas" style="width:700px;heig

我想使用Google Maps API V3制作web应用程序，我有一个地图可以显示数据库中的标记，以防我想使用下拉菜单对标记进行分类，但当我从选项“1”移动到选项“2”时，选项“1”中的标记仍会显示，因此，我想清除选项“1”中的标记，并用选项“2”替换为标记。这是我的密码

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


标记1
标记2
标记3
//示例代码由August Li编写
var icon=new google.maps.MarkerImage（“http://maps.google.com/mapfiles/ms/micons/blue.png",
新的google.maps.Size（32,32），新的google.maps.Point（0,0），
新的google.maps.Point（16,32））；
var中心=null；
var-map=null；
var-currentPopup；
var bounds=new google.maps.LatLngBounds（）；
功能添加标记（lat、lng、info）{
var pt=新的google.maps.LatLng（lat，lng）；
边界扩展（pt）；
var marker=new google.maps.marker({
职位：pt，
图标：图标，
地图：地图
});
var popup=new google.maps.InfoWindow({
内容:信息,，
最大宽度：300
});
google.maps.event.addListener（标记“单击”，函数（）{
如果（currentPopup！=null）{
currentPopup.close（）；
currentPopup=null；
}
弹出。打开（地图、标记）；
当前弹出=弹出；
});
google.maps.event.addListener（弹出窗口“closeclick”，函数（）{
潘托地图（中）；
currentPopup=null；
});
}
函数initMap（）{
map=new google.maps.map（document.getElementById（“地图画布”）{
中心：新google.maps.LatLng（0,0），
缩放：14，
mapTypeId:google.maps.mapTypeId.ROADMAP，
mapTypeControl:false，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.HORIZONTAL\u栏
},
导航控制：对，
导航控制选项：{
样式：google.maps.NavigationControlStyle.SMALL
}
});
center=bounds.getCenter（）；
映射边界（bounds）；
}
函数dropdownChanged（）
{
var index=document.getElementById（“kategori”）.value；
如果（索引==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>


标记1
标记2
标记3
//示例代码由August Li编写
var icon=new google.maps.MarkerImage（“http://maps.google.com/mapfiles/ms/micons/blue.png",
新的google.maps.Size（32,32），新的google.maps.Point（0,0），
新的google.maps.Point（16,32））；
var中心=null；
var-map=null；
var-currentPopup；
var bounds=new google.maps.LatLngBounds（）；
//储存标记
var-markerList=[]；
功能添加标记（lat、lng、info）{
var pt=新的google.maps.LatLng（lat，lng）；
边界扩展（pt）；
var marker=new google.maps.marker({
职位：pt，
图标：图标，
地图：地图
});
//在列表中存储标记
markerList.push（标记器）；
var popup=new google.maps.InfoWindow({
内容:信息,，
最大宽度：300
});
google.maps.event.addListener（标记“单击”，函数（）{
如果（currentPopup！=null）{
currentPopup.close（）；
currentPopup=null；
}
弹出。打开（地图、标记）；
当前弹出=弹出；
});
google.maps.event.addListener（弹出窗口“closeclick”，函数（）{
潘托地图（中）；
currentPopup=null；
});
}
函数initMap（）{
map=new google.maps.map（document.getElementById（“地图画布”）{
中心：新google.maps.LatLng（0,0），
缩放：14，
mapTypeId:google.maps.mapTypeId.ROADMAP，
mapTypeControl:false，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.HORIZONTAL\u栏
},
导航控制：对，
导航控制选项：{
样式：google.maps.NavigationControlStyle.SMALL
}
});
center=bounds.getCenter（）；
映射边界（bounds）；
}
函数dropdownChanged（）
{
//在添加新标记之前清除所有标记
对于（变量i=0；i你的PHP生成的javascript看起来是什么样子的？你能提供一个展示问题的例子吗？太棒了，很高兴我能帮上忙！！