如何在InfoWindow中添加按钮? [英] How to add a button to InfoWindow?

问题描述

我有以下代码，每次尝试添加按钮时都无效.

I have the following code and everytime I try to add a button it doesn't work.

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

Could someone please show me how to add a button that shows an alert box when clicked?

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>

这篇关于如何在InfoWindow中添加按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！