按钮在谷歌地图上删除标记(对于非程序员)

时间:2011-10-12 15:04:25

标签: javascript jquery google-maps

我正在尝试谷歌地图和数据演示,并想知道是否可以在地图页面上创建一个按钮来删除标记。

我没有编程经验(我主要处理SQL)所以任何帮助表示感谢 - 我从不同的网站上获取以下代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
  html { height: 100% } 
  body { height: 100%; margin: 0; padding: 0 } 
  #map_canvas { height: 100% } 
</style> 
<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?sensor=false"> 
</script> 
<script type="text/javascript"> 

    // Standard google maps function 
    function initialize() { 
        var myLatlng = new google.maps.LatLng(52.469397,-3.208008);
        var myOptions = { 
            zoom: 8, 
            center: myLatlng, 
            mapTypeId: google.maps.MapTypeId.ROADMAP 
        } 
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
        TestMarker(); 
    } 

    // Function for adding a marker to the page. 
    function addMarker(location) { 
        marker = new google.maps.Marker({ 
            position: location, 
            map: map,
    animation: google.maps.Animation.DROP  
        }); 
    } 

    // Testing the addMarker function 
    function TestMarker() { 
Marker1=new google.maps.LatLng(52.268000,-3.043000); addMarker(Marker1); 
Marker23=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker23); 
Marker24=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker24); 
Marker25=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker25); 
Marker26=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker26); 
Marker584=new google.maps.LatLng(51.747777,-3.500599); addMarker(Marker584); 
Marker585=new google.maps.LatLng(51.608871,-3.647570); addMarker(Marker585); 

    } 
</script> 
</head> 
<body onload="initialize()"> 


  <div id="map_canvas" style="border: 1px solid black; width: 500px; height: 400px;">map     div</div> 
<p style="margin-top: 5px"> 
  <button id="drop">Drop</button>  
</p> 

</body> 
</html>

现在这会创建一个按钮,但我不能为我的生活找出如何将其链接回我的标记。我找到了一些here我应该能适应的东西,但我只是没有专门知识。

我的标记是由sql查询定义的,但是现在我希望能够简单地输入一个列表并在我点击它时获取一个放置按钮来删除它们。

任何帮助都非常感激:)

1 个答案:

答案 0 :(得分:1)

从初始化函数中删除对TestMarker的调用。然后只需在按钮上添加一个onclick属性:

  <button id="drop" onclick="TestMarker()">Drop</button>