繁体   English   中英

如何向信息窗口添加按钮?

[英]How to add a button to InfoWindow?

我有以下代码,每次尝试添加按钮时它都不起作用。

有人可以告诉我如何添加一个单击时显示警告框的按钮吗?

var infowindow = new google.maps.InfoWindow({
    content: " "
});
google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent('<p>Event Name: '+this.title+'</p>' +
        '<p>Event Type: '+this.etype+'</p>' +
        '<p>Cause: '+this.cause+'</p>' +
        '<p>Date: '+this.date+'</p>' +
        '<p>Time: '+this.time+'</p>' +
        '<button onclick="myFunction()"> 'Click me'</button>');                
    infowindow.open(map, this);
  });
});

你不匹配 '

    var infowindow = new google.maps.InfoWindow({
    content: " "
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent('<p>Event Name: '+this.title+'</p>' +
            '<p>Event Type: '+this.etype+'</p>' +
            '<p>Cause: '+this.cause+'</p>' +
            '<p>Date: '+this.date+'</p>' +
                '<p>Time: '+this.time+'</p>' +
                '<button onclick="myFunction()">Click me</button>');


    infowindow.open(map, this);
  });
});

代码片段:

 var infowindow; function initialize() { var map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); var marker = new google.maps.Marker({ position: map.getCenter(), map: map }); infowindow = new google.maps.InfoWindow({ content: " " }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent('<p>Event Name: ' + this.title + '</p>' + '<p>Event Type: ' + this.etype + '</p>' + '<p>Cause: ' + this.cause + '</p>' + '<p>Date: ' + this.date + '</p>' + '<p>Time: ' + this.time + '</p>' + '<button onclick="myFunction()">Click me</button>'); infowindow.open(map, this); }); google.maps.event.trigger(marker, 'click'); } google.maps.event.addDomListener(window, "load", initialize); function myFunction() { infowindow.setContent('<div style="background-color: green">' + infowindow.getContent() + "</div>"); }
 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px }
 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map_canvas"></div>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM