Fatal编程技术网

Google maps api 3 带按钮的信息窗口

google-maps-api-3

Google maps api 3 带按钮的信息窗口,google-maps-api-3,infowindow,Google Maps Api 3,Infowindow,您好，我正在尝试在信息窗口中放置按钮，当我单击按钮时，至少会发生一个警报。下面是我的代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/ja

您好，我正在尝试在信息窗口中放置按钮，当我单击按钮时，至少会发生一个警报。下面是我的代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    function initialize() {

        var mapOptions = {
            zoom: 7,
            center: new google.maps.LatLng(12.98,77.59),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map'), mapOptions);

        var infoWindow = new google.maps.InfoWindow();

        (function() {
            var marker = new google.maps.Marker({
                map: map,
                draggable: false,
                position: new google.maps.LatLng(12.98,77.59)
            });
            var content =   "<div id='tabs'>"+
                            "<form id='button'>"+
                            "<div>"+
                            "<input type='button' onclick='alert(infoWindow)'>"+
                            "</div>"+
                            "</form>"+
                            "</div>";  
   google.maps.event.addListener(marker, 'click', function(event) {
                infoWindow.setContent(content);
                infoWindow.open(map, marker);
            });
        })();

    };
  </script>
  </head>
  <body onload="initialize()">
    <div id="map" style="width:400px; height:300px"></div>
  </body>
  </html>


函数初始化（）{
变量映射选项={
缩放：7，
中心：新google.maps.LatLng（12.98,77.59），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（'map'），mapOptions）；
var infoWindow=new google.maps.infoWindow（）；
（功能（）{
var marker=new google.maps.marker({
地图：地图，
可拖动：错误，
位置：新google.maps.LatLng（12.98,77.59）
});
var content=“”+
""+
""+
""+
""+
""+
"";  
google.maps.event.addListener（标记，'click'，函数（事件）{
infoWindow.setContent（content）；
信息窗口。打开（地图、标记）；
});
})();
};
在这里，我可以添加按钮，但无法使其正常工作。如果您将alert（）中的值作为变量而不是字符串传递，将不胜感激。您需要在单引号或双引号内传递此消息

var content =   "<div id='tabs'>"+
                "<form id='button'>"+
                "<div>"+
                "<input type='button' onclick='alert(\"infoWindow\")'>"+ // here
                "</div>"+
                "</form>"+
                "</div>";  

var content=“”+
""+
""+
“+//这里
""+
""+
"";
现在试试这个。

如果你想从InfoWindows中获得更多信息并在其中添加HTML内容，我建议你试试。查看参考资料

它还有一些附加功能，比如关闭内置窗口。

@pratik它的工作原理谢谢。我错过了这个基本概念。如果我想让该按钮做出更多动作，比如触发另一个事件，该怎么办？我无法理解“像触发另一个事件”。您可以在按钮单击时调用该函数，然后执行类似onclick=“myFunction（）”的操作，参数onclick=“myFunction（'hello'）”类似于关闭标记函数。我可以这样做吗google.maps.event.addDomListener（document.getElementById（'button1'），'click'，closeMarker（）；}）；函数removeMarker（）{alert（'markerclosed'）；}但为此，您已经在信息窗口的右上角获得了关闭按钮。关闭特定的信息窗口时，您需要保留该信息窗口对象，关闭当前的信息窗口时，请使用信息窗口关闭。关闭（）这些链接已断开。实用程序库已移动到github-我希望这些链接，谢谢你的垂涎！