什么是正确的过程测试eventlisteners他们依赖于当前的infowindow

时间:2014-10-24 04:16:51

标签: javascript jquery google-maps google-maps-api-3

如果我有另一个函数绑定一个用户可以编辑标记信息的信息窗口,那么创建标记的函数中的按钮单击侦听器是否有任何原因。

我现在无法添加我的代码,但是为了让它工作/应该遵循的正确过程是错误的。

过程:

  1. 添加rightclick event listener初始化地图以调用创建标记功能(以创建新标记。
  2. 在创建标记函数中有一个if statement,它指定要绑定到infowindow和绑定函数的内容字符串(编辑或正常显示)。
  3. 绑定功能将infowindow的内容设置为正确的html,即“输入表单”。
  4. 回到创建标记功能我有一个保存按钮事件监听器,(保存按钮在我的编辑表单上),然后将新信息保存到数据库并更新标记。
  5. 我有console.log正确显示infowindow以及保存按钮单击事件。并且click事件根本没有注册任何内容。

    编辑:点击我的驱动程序获取代码,这就是所提到的功能。

    function map_initialize()
        {
            var googleMapOptions = 
                { 
                    center: mapCenter, // map center
                    zoom: 4, //zoom level, 0 = earth view to higher value
                    maxZoom: 18,
                    minZoom: 2,
                    zoomControlOptions: {
                        style: google.maps.ZoomControlStyle.SMALL //zoom control size
                    },
                    scaleControl: true, // enable scale control
                    mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
                };
    
            map = new google.maps.Map(document.getElementById("google_map"), googleMapOptions);         
            start(); //THIS FUNCTION calls the create markers for all in my db.
            google.maps.event.addListener(map, 'rightclick', function(event) 
            {
                create_marker(event.latLng, 'New Event', EditForm, "New", true, true, true, "http://sanwebe.com/assets/google-map-save-markers-db/icons/pin_green.png", -1); //this marker has to stay seperate because type has not been specifyed
            });                                 
        }
    
    
        var EditForm = '<p><div class="marker-edit">'+
    '<form action="ajax-save.php" method="POST" name="SaveMarker" id="SaveMarker">'+
    '<label for="pName"><span>Place Name :</span><input type="text" name="pName" class="save-name" placeholder="Enter Title" maxlength="30" /></label>'+
    '<label for="pDesc"><span>Address :</span><textarea name="pDesc" class="save-desc" placeholder="Enter Address" maxlength="90"></textarea></label>'+
    '<label for="pDeSS"><span>Description :</span><textarea name="pDeSS" class="save-DeSS" placeholder="Enter Description" maxlength="90"></textarea></label>'+
    '<label for="pType"><span>Type :</span> <select name="pType" class="save-type"><option value="Ghost">Ghost</option><option value="UFO">UFO</option>'+
    '<option value="Yowie">Yowie</option><option value="Other">Other</option></select></label>'+
    '</form>'+
    '</div></p><button name="save-marker" class="save-marker">Save Marker Details</button>';
    
    
    function create_marker(MapPos, MapTitle, MapDesc, MapType, InfoOpenDefault, DragAble, Removable, iconType, mID) 
        {           
        marker = new google.maps.Marker({
                position: MapPos,
                map: map,
                draggable:DragAble,
                animation: google.maps.Animation.DROP,
                title: MapTitle,
                icon: iconType
            });
    
            //Content structure of info Window for the Markers //for the display normally
            var contentString = $('<div class="marker-info-win">'+
                '<div class="marker-inner-win"><span class="info-content">'+
                '<h1 class="marker-heading">'+MapTitle+'</h1>'+
                MapDesc+
                '</span><button name="remove-marker" class="remove-marker" title="Remove Marker">Remove Marker</button>'+
                '<button name="sm-marker" class="sm-marker" title="See More">See More</button>'+
                '<input type="image" name="upvote-marker" class="upvote-marker" src="images/upvote.png" alt="Up Vote Marker">'+
                '<input type="image" name="downvote-marker" class="downvote-marker" src="images/downvote.png" alt="Up Vote Marker">'+
                '</div></div>');    
    
            if (mID == -1){
                bindInfoWindow(marker, map, infowindow, EditForm, MapTitle);
                console.log(marker, map, infowindow, EditForm, MapTitle);
                console.log(contentString);
            }else{
                    bindInfoWindow(marker, map, infowindow, contentString[0], MapTitle);
            }
    
    
            //Find remove button in infoWindow
                //Check on button display
            var removeBtn   = contentString.find('button.remove-marker')[0];
            var saveBtn     = contentString.find('button.save-marker')[0];
            var smBtn       = contentString.find('button.sm-marker')[0];
            var upvoteBtn       = contentString.find('input.upvote-marker')[0];
            var downvoteBtn     = contentString.find('input.downvote-marker')[0];   
            //add click listner to remove marker button
            google.maps.event.addDomListener(removeBtn, "click", function(event) {
                remove_marker(marker);
            });
    
            google.maps.event.addDomListener(upvoteBtn, "click", function(event) {
                upvote_marker(mark,mID);
            });
    
            google.maps.event.addDomListener(downvoteBtn, "click", function(event) {
                downvote_marker(mark, mID);
            })
    
    
            //save button form get
            if(typeof saveBtn !== 'undefined') //continue only when save button is present
            {
                console.log("Button not undefined");
                console.log(EditForm);
                console.log(contentString);
                //add click listner to save marker button
                google.maps.event.addDomListener(saveBtn, "click", function(event) {
                    var mReplace = contentString.find('span.info-content'); //html to be replaced after success
                    var mName = contentString.find('input.save-name')[0].value; //name input field value
                    var mDesc  = contentString.find('textarea.save-desc')[0].value; //description input field value
                    var mType = contentString.find('select.save-type')[0].value; //type of marker
                    var mDeSS = contentString.find('textarea.save-DeSS')[0].value;//description of marker
                    console.log("this is working the click");
                    if(mName =='' || mDesc =='')//name and address cant be blank
                    {
                        alert("Please enter Name and Description!"); //change wording
                    }else{
                        save_marker(marker, mName, mDesc, mType, mDeSS, mReplace); //call save marker function
                        if (mType == "Ghost"){
                        savediconload = 'images/ghost-icon-new.png';
                        } else if (mType == "UFO"){
                        savediconload = 'images/ufo-icon-new.png';
                        } else if (mType == "Yowie"){
                        savediconload = 'images/yowie-icon-new.png';
                        } else if (mType == "Other"){
                        savediconload = 'images/other-icon-new';
                        }
                    }
                });
            }
    
    function bindInfoWindow(marker, map, infowindow, html, mapSearchTerm){
            if (html == EditForm){
                infowindow.setContent(html);
                infowindow.open(map, marker);
                //mark = this;
    }else{
            google.maps.event.addListener(marker, 'click', function(){
                infowindow.setContent(html);
                infowindow.open(map, marker);
                mark = this;
                console.log(mark);
                ImageSearchTerm = mapSearchTerm;
                console.log(ImageSearchTerm);
            });
        }
    
    }
    

0 个答案:

没有答案