Javascript 尝试在googlemap信息窗口中添加按钮

我正试图在GoogleMapInfoWindow中添加一个按钮，但我是javascript的初学者，我已经花了数周的时间在这方面，但仍然没有工作。。。所以我希望你们中的一位能够帮助我

给你解释一下。。。我从bdd获取标记，以便在地图上显示它们。然后单击标记，将打开一个信息窗口，其中包含所有信息标记

这一切都很完美，但当我不明白的时候

我已经在每个infoWindow标记中添加了一个提交按钮，我想在单击提交按钮时执行一个操作（保存到数据库）。但是按钮根本没有反应

我删除了所有包含save函数的代码，以保持其清晰，因为有一个警报（“单击”）来测试按钮

<script type="text/javascript">
var bounds;
var markers = [];
var markerCount = 0;
    function initialize(){
            bounds = new google.maps.LatLngBounds();
            var myLatLng = new google.maps.LatLng(46.775090, 2.507969);
            var mapOptions={
                zoom: 6,
                center: myLatLng,
                maxZoom: 11,
            },
            map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
            setMarkers(map,marker);
            const geocoder = new google.maps.Geocoder();
        
            document.getElementById("submit").addEventListener("click", () => {
              geocodeAddress(geocoder, map);
            }); 
    }
    
    function setMarkers(map,locations){
            for(var i=0; i<locations.length; i++){
                var station = locations[i];
                var myLatLng = new google.maps.LatLng(station['marker_latitude'], station['marker_longitude']);
                var infoWindow = new google.maps.InfoWindow();
                var image = 'https://marchad.fr/wp-includes/images/marchad.png';
                var description = station['marker_text'];

                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    icon: image,
                    title: station['marker_ville'],
                    id: station['marker_id']
                });
            
                (function(marker, i){
                    google.maps.event.addListener(marker, "click",function(){
                        var station = locations[i];
                        var mId  = station['marker_id']; //description input field value
                        var contentString = ("<div id='infoWindow"+station['marker_id']+">"
                            +"<p class='texte'><strong>"+station['marker_text']+"</strong><p>"
                            +"<p class='texte'>Ce staliad est géré par un "+station['marker_user_type']+"<p>"
                            +"<p class='texte'><strong>Adresse : </strong>"+station['marker_adresse']+"<p>"
                            +"<p class='texte'><strong>Jour de permanence : </strong>"+station['marker_day']+"<p>"
                            +"<p class='texte'><strong>Dépôts : </strong>de "+station['marker_depot_start_time']+" à "+station['marker_depot_end_time']+"<p>"
                            +"<p class='texte'><strong>Retraits : </strong>de "+station['marker_start_time']+" à "+station['marker_end_time']+"<p>"
                            +"<p class='texte'><strong>Téléphone : </strong>"+station['marker_user_contact']+"<p>"
                            +"<p class='texte'><strong>Mail : </strong>"+station['marker_contact_mail']+"<p>"
                            +"<p class='texte'><strong>Commentaire : </strong>"+station['marker_commentaire']+"<p>"
                            +'<form action="ajax-save.php" method="POST" name="SaveMarker" id="SaveMarker'+station['marker_id']+'">'
                            +'<input id="idInput'+station['marker_id']+'" type="hidden" name="marker-id" class="marker-id'+station['marker_id']+'" value='+station['marker_id']+' />'+station['marker_id']+'</input>'
                            +'</form>'
                            +'<input id="inputButton'+station['marker_id']+'" type="button" id="save-marker'+station['marker_id']+'" name="save-marker" class="save-marker'+station['marker_id']+'" data-id="'+station['marker_id']+'" value="M\'inscrire" />'
                            +'<div id="test'+station['marker_id']+'">'+vendorId+'</div>'
                            +'<span class="info-content'+station['marker_id']+'">'
                            +'<h1 class="marker-heading"></h1>'
                            +'</span>'
                            +"</div>"
    );  
                        
                            infoWindow.close();
                            infoWindow.setContent(contentString);
                            infoWindow.open(map,this);
                        
                            var class_name_removeBtn  = 'remove-marker'+station['marker_id'];
                            var class_name_saveBtn  = 'save-marker'+station['marker_id'];
                            var removeBtn   = document.getElementsByClassName(class_name_removeBtn);
                            var saveBtn     = document.getElementsByClassName(class_name_saveBtn);
                            console.log(removeBtn);
                            console.log(saveBtn);
                
                        
                            //add click listner to save marker button
                            google.maps.event.addDomListener(saveBtn, "click", function(event) {
                                var class_name_mReplace  = 'info-content'+station['marker_id'];
                                var class_name_mName  = 'marker-id'+station['marker_id'];
                                var mReplace = document.getElementsByClassName(class_name_mReplace); //html to be replaced after success
                                var mName = document.getElementsByClassName(class_name_mName); //name input field value
                                var mId = station['marker_id'];
                                var vId = vendorId;

                                console.log(mReplace);
                                console.log(mName);
                                console.log(mId);
                                console.log(vId);

                                if(mId !=='')
                                {
                                    alert("click");
                                    save_marker( mName, mId, mReplace,vId); //call save marker function
                                }else{
                                    alert("Something went wrong. Please contact admin");
                                }
                            });


                            if(typeof removeBtn !== 'undefined') //continue only when save button is present
                            {
                                google.maps.event.addDomListener(removeBtn, "click", function(event) {
                                    var class_name_mName  = 'marker-id'+station['marker_id'];
                                    var mName = document.getElementsByClassName(class_name_mName);  //name input field value
                                    var vId = vendorId;
                                    remove_marker(mName,vId);
                                });
                            }

                
                    }); 
                })(marker, i);
                
        }
    }

 </script>

var界；
var标记=[]；
var-markerCount=0；
函数初始化（）{
bounds=新的google.maps.LatLngBounds（）；
var mylatng=newgoogle.maps.LatLng（46.775090,2.507969）；
var映射选项={
缩放：6，
中心：myLatLng，
maxZoom:11，
},
map=new google.maps.map（document.getElementById（“地图画布”），mapOptions）；
设置标记（地图、标记）；
const geocoder=新的google.maps.geocoder（）；
document.getElementById（“提交”）.addEventListener（“单击”，（）=>{
地理编码地址（地理编码器、地图）；
}); 
}
功能设置标记（地图、位置）{
对于（var i=0；i您的第一个问题是
saveBtn
不是DOM的一部分，直到在
InfoWindow
内容中添加字符串时打开
InfoWindow

相关问题：






第二个问题是
document.getElementsByClassName（class_name_saveBtn）；
返回一个数组，而不是：

document.getElementsByClassName(class_name_saveBtn);

对于单个标记，您需要：

document.getElementsByClassName(class_name_saveBtn)[0];

对于多个标记/信息窗口（获取最后创建的标记/信息窗口）：



代码片段：


var界；
var标记=[]；
var-markerCount=0；
/*变量标记=[{
地标纬度：47.394144，
经度：0.68484，
标识：1
}] */
var marker=[{“marker\u id”：“6”，“marker\u user\u id”：“0”，“marker\u user\u type”：“marker\u user\u stal”：null，“marker\u categorie”：“5”，“marker\u address”：“marker\u numerio\u voie”：“marker\u voie”：“marker\u zip”：“marker\u ville”：“图卢兹”，“marker\u部门”：“31”，“marker\u地区”：“0”，“marker\u经度”：“1.434917”，“marker\u纬度”：“43.573085”，“marker\u日”：”，“marker\u depot\u start\u time”：“00:00:00”，“marker\u depot\u end\u time”：“00:00:00”，“marker\u end\u time”：“00:00:00”，“marker\u文本”：“Casino Barri\u00e8re”，“marker\u用户联系人”：“marker\u联系人邮件”：“marker\u启用联系人电话”：“marker\u启用联系人”；“marker\u邮件”：“marker\u注释”：空，“marker\u活动”：“Oui”，“id”：空，”marker\u id:null，“user\u id:null，”user\u actif:null}，{“marker\u id”：“7”，“marker\u user\u id”：“0”，“marker\u user\u type”：“marker\u user\u Stall”：null，“marker\u categorie”：“6”，“marker\u Address”：“marker\u numero\u voie”：“marker\u voie”：“marker\u zip”：“marker\u ville”：“marker\u ville”：“图卢兹”，“marker\u部门”：“31”，“marker\u地区”：“0”，“marker\u”：“1.7856”，“经度”marker_latitude“：”43.604573“，”marker_day“：”marker_depot_start_time“：”00:00:00“，”marker_depot_end_time“：”00:00:00“，”marker_end_time“：”00:00:00“，”marker_文本“：”Gaumont Wilson电影院“，”marker_用户联系人“：”marker_联系邮件“：”marker_启用联系电话“，”marker_启用联系邮件“：”marker\u commentaire:null，“marker\u actif”：“Oui”，“id”：null，“marker\u id”：null，“user\u id”：null，{“marker\u id”：“8”，“marker\u user\u id”：“0”，“marker\u user\u type”：“marker\u user\u Stall”：null，“marker\u Category”：“6”，“marker\u地址”：“marker\u numero\u voie”：“marker\u voie”：“marker\u zip”：“marker\u ville”：“Labmarker_地区：“0”、“marker_经度”：“1.511496”、“marker_纬度”：“43.53992”、“marker_日”：“marker_depot_开始时间”：“00:00:00”、“marker_depot_结束时间”：“00:00”、“marker_开始时间”：“00:00”、“marker_结束时间”：“00:00”、“marker_文本”：“电影院Gaumont Lab\u00e8ge”、“marker_用户联系人”：“marker_联系人”：“marker_邮件”：”marker\u enable\u contact\u telephone“：”marker\u enable\u contact\u mail“：”marker\u commentaire“：”null“，”marker\u actif“：”null“，”用户id“：”null“，”用户id“：”null“，”marker\u用户id“：”0“，”marker\u用户类型“：”marker\u用户“：”null“，”marker\u categorie“：”6“，”marker\u地址“，”marker\u numero\u voie“：”marker\u voie“：”marker\u voie“：”“marker_zip”：“marker_ville”：“Blagnac”，“marker_Department”：“31”，“marker_region”：“0”，“marker_经度”：“1.373341”，“marker_纬度”：“43.644029”，“marker_day”：“marker_depot_start_time”：“00:00”，“marker_depot_end_time”：“00:00”，“marker_start_开始时间”：“00:00”，“marker_end_时间”：“00:00”，“marker_文本”：“Mega R Blagnac”“marker\u user\u contact”：“marker\u contact\u mail”：“marker\u enable\u contact\u telephone”：“marker\u contact\u mail”：“marker\u commentaire”：null，“marker\u actif”：“Oui”，“id”：null，“user\u id”：null，{“marker\u id”：“10”，“marker\u user\u id”：“0”，“marker\u user\u type”：“marker\u user\u Stall”：null，“marker\u categorie”：“4”，“marker\u Address”“，”marker\u numero\u voie“：”marker\u voie“：”marker\u zip“：”marker\u ville“：”图卢兹“，”marker\u部门“：”31“，”marker\u地区“：”0“，”marker\u经度“：”1.435198“，”marker\u纬度“：”43.62186“，”marker\u日“，”marker\u仓库开始时间“：”00:00“，”marker\u仓库结束时间“：”00:00“，”marker\u开始时间“，”marker_text:“保龄球最低限度”；“marker_联系人”；“marker_联系人”；“marker_联系人”；“marker_联系人”；“marker_启用联系人”；“marker_联系人”；“marker_启用联系人”；“marker_评论”；“marker_活动”；“Oui”，“id”：null，“marker_id”：null，“marker_id”：null，“user_actif”：null，{“marker_id”：“11”；“标记\用户\ id:“0”，“ma”
var removeBtn = document.getElementsByClassName(class_name_removeBtn);
removeBtn = removeBtn[removeBtn.length-1];
var saveBtn = document.getElementsByClassName(class_name_saveBtn);
saveBtn = saveBtn[saveBtn.length-1];