Question

我目前正在研究谷歌地图api。一切都工作正常，但我在信息框上插入了一个按钮，我希望该按钮应该是可点击的。这是我的代码

<script type="text/javascript">

    var secheltLoc = new google.maps.LatLng(19.0399503, 72.8414602),
         markers,
            myMapOptions = {
             zoom: 13,
            center: secheltLoc,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            ,mapTypeControl: true,
                mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                    position: google.maps.ControlPosition.BOTTOM_CENTER
                },
                panControl: true,
                panControlOptions: {
                    position: google.maps.ControlPosition.TOP_RIGHT
                },
                zoomControl: true,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.LARGE,
                    position: google.maps.ControlPosition.TOP_RIGHT
                },
                scaleControl: true,
                streetViewControl: true,
                streetViewControlOptions: {
                    position: google.maps.ControlPosition.TOP_RIGHT
                }
        },
        map = new google.maps.Map(document.getElementById("map"), myMapOptions);

    function initMarkers(map, markerData) {
        var newMarkers = [],
            marker;

        for(var i=0; i<markerData.length; i++) {
            marker = new google.maps.Marker({
                map: map,
                position: markerData[i].latLng,
                visible: true,
                icon:'images/marker.png'
            }),
            boxText = document.createElement("div");
        boxText.style.cssText = "border: 1px solid black; margin-top: -102px; background:black; padding: 5px; position:absolute; top:13px; left:112px; width:100%;";
        boxText.innerHTML = "<div class='infotext'>"+markerData[i].address +",<br>"+markerData[i].state+"</div><br><input class='yellow support_addr' location_id='"+markerData[i].location_id+"' type='button' value='Support'/><input class='yellow' type='button' value='Share'/>";
             infoboxOptions = {
                 content: boxText
                ,disableAutoPan: false
                ,maxWidth: 0
                ,pixelOffset: new google.maps.Size(-100, -70)
                ,zIndex: null
                ,boxStyle: { 
                  background: "url('images/tipbox.png') left 94% no-repeat"
                  ,opacity: 0.9
                  ,width: "22%"
                  ,top:"69.282167px"
                  ,left:"523.446926px"
                 }
                ,closeBoxMargin: "10px 2px 2px 2px"
                ,closeBoxURL: "http://localhost/faod_app/images/close.gif"
                ,infoBoxClearance: new google.maps.Size(1, 1)
                ,pane: "floatPane"
                ,enableEventPropagation: true
            };

            newMarkers.push(marker);
            //define the text and style for all infoboxes

            //Define the infobox
            newMarkers[i].infobox = new InfoBox(infoboxOptions);
            //Open box when page is loaded
            //newMarkers[i].infobox.open(map, marker);
            //Add event listen, so infobox for marker is opened when user clicks on it.  Notice the return inside the anonymous function - this creates
            //a closure, thereby saving the state of the loop variable i for the new marker.  If we did not return the value from the inner function, 
            //the variable i in the anonymous function would always refer to the last i used, i.e., the last infobox. This pattern (or something that
            //serves the same purpose) is often needed when setting function callbacks inside a for-loop.






            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {

                for (var j = 0; j < newMarkers.length; j++)
                {
                    var currentMarker = newMarkers[j];
                    newMarkers[j].infobox.close(map,currentMarker);
                    console.log(currentMarker);
                }


                    newMarkers[i].infobox.open(map, this);
                    //map.panTo(markerData[i].latLng);
                }
            })(marker, i));

        }

        return newMarkers;
    }

    //here the call to initMarkers() is made with the necessary data for each marker.  All markers are then returned as an array into the markers variable

    <?php
            $query = "SELECT
                        *
                    FROM
                        location_submitted
                    WHERE
                        is_active = '1'
                    ";

            //echo $query;exit;
            $queryexecute = mysqli_query($db,$query);

            $count_no = @mysqli_num_rows($queryexecute);


            $string = ''; 
            $geo_array = array();

            $i = 1;

          ?>          


    markers = initMarkers(map, [
        <?php
                while($res = mysqli_fetch_assoc($queryexecute))
                {
                    //alert($res);

                    if($count_no == $i)
                    {
                        $comma = '';
                    }
                    else
                    {
                        $comma = ',';
                    }

                    $string .= '["'.$res['location'].'","'.$res['city'].'",'.$res['latitude'].','.$res['longitude'].']'.$comma;

                    array_push($geo_array,$res['latitude'],$res['longitude']);  

                    $i++;           

        ?>

        { latLng: new google.maps.LatLng(<?php echo $res['latitude'].','.$res['longitude']?>), address: "<?php echo $res['location']?>", state: "<?php echo $res['city'];?>",location_id:"<?php echo $res['location_id']?>" }<?php echo $comma;?>

        <?php
                }
        ?>


    ]);

</script>

我尝试了这个解决方案Magnific-popup fails to open from button inside Google Maps infoBox，但就我而言，它无效。

编辑： -

我还在我的forloop中添加了以下代码，但没有任何反应： -

window.google.maps.event.addListener(newMarkers[i], "domready", function () {
                $('.support_addr').on('click', function () {
                    alert();
                });
            });

编辑： - JSFIDDLE

请提前帮助我，

Answer 1

<强> DEMO FIDDLE

您可能需要在文档级别绑定事件，因为您正在动态创建HTML元素。

像这样：

$(document).on("click",".support_addr",function() { 
  alert();
});

我有updated your fiddle

谷歌地图上的信息框内的按钮应该是可点击的

1 个答案: