Javascript 在谷歌地图上放置标记的按钮（适用于非程序员）_Javascript_Jquery_Google Maps

Javascript 在谷歌地图上放置标记的按钮（适用于非程序员）

javascript jquery google-maps

Javascript 在谷歌地图上放置标记的按钮（适用于非程序员）,javascript,jquery,google-maps,Javascript,Jquery,Google Maps,我正在尝试谷歌地图和数据展示，想知道是否有可能在地图页面上创建一个按钮来放置标记我没有编程经验（我主要处理SQL），因此非常感谢您的帮助-我从不同的webistes获取了以下代码： <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css">

我正在尝试谷歌地图和数据展示，想知道是否有可能在地图页面上创建一个按钮来放置标记

我没有编程经验（我主要处理SQL），因此非常感谢您的帮助-我从不同的webistes获取了以下代码：

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


html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#地图画布{高度：100%}
//标准谷歌地图功能
函数初始化（）{
var mylatng=new google.maps.LatLng（52.469397，-3.208008）；
变量myOptions={
缩放：8，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP
} 
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
TestMarker（）；
} 
//用于向页面添加标记的函数。
函数addMarker（位置）{
marker=新的google.maps.marker（{
位置:位置,，
地图：地图，
动画：google.maps.animation.DROP
}); 
} 
//测试addMarker函数
函数TestMarker（）{
Marker1=newgoogle.maps.LatLng（52.268000，-3.043000）；addMarker（Marker1）；
Marker23=新的google.maps.LatLng（51.524243，-3.193911）；addMarker（Marker23）；
Marker24=新的google.maps.LatLng（51.524243，-3.193911）；addMarker（Marker24）；
Marker25=新的google.maps.LatLng（51.524243，-3.193911）；addMarker（Marker25）；
Marker26=新的google.maps.LatLng（51.524243，-3.193911）；addMarker（Marker26）；
Marker584=新的google.maps.LatLng（51.747777，-3.500599）；addMarker（Marker584）；
Marker585=新的google.maps.LatLng（51.608871，-3.647570）；addMarker（Marker585）；
} 
地图组

滴

现在这就创建了一个按钮，但我一辈子都搞不清楚如何将它链接回我的标记。我已经找到了一些我应该能够适应的东西，但我就是不知道该怎么做

我的标记是由sql查询定义的，但现在我希望能够简单地输入一个列表，并在单击该列表时获得一个拖放按钮来拖放它们

非常感谢您的帮助：）

从初始化函数中删除对TestMarker的调用。然后只需将onclick属性添加到按钮：

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

Drop

Wow-我简直不敢相信这有多简单！如果这不是太多的要求，你知道如何添加一个按钮，随后将删除标记？谢谢第二个按钮调用不同的函数。该函数需要遍历所有标记并调用marker.setMap（null）；