我正在尝试从InfoWindow内部将变量传递给按钮onClick函数？

Question

我看过这样的例子，但是还没有找到将圆形变量传递给嵌入在Google Maps InfoWindow中的按钮onclick函数的解决方案

此行有效：

var theCircleButton = "<input type='button' onClick='console.log(" + lat + "," + lon + ")' class='btn' value='Show Circle'></input>";

尽管此行不：

var theCircleButton = "<input type='button' onClick='console.log(" + lat + "," + lon + "," + circle + ")' class='btn' value='Show Circle'></input>";

因此，当我尝试通过以下行使圆圈可见时，它将不起作用

var theCircleButton = "<input type='button' onClick='circleVisible(" + circle + ")' class='btn' value='Show Circle'></input>";

这是功能代码

function circleVisible(circle) {
  circle.setVisible(true);
}

function circleInvisible(circle) {
  circle.setVisible(false);
}

function fillMap(map, lat, lon) {

  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lon),
    map: map,
    label: "My Marker"
  });

  var circle = new google.maps.Circle({
    strokeWeight: 1,
    fillOpacity: 0.0,
    map: map,
    visible: false,
    center: new google.maps.LatLng(lat, lon),
    radius: 10000
  });

  var infoWindow = new google.maps.InfoWindow({
      position: marker.getPosition()
  });

  //var theCircleButton = "<input type='button' onClick='console.log(" + lat + "," + lon + ")' class='btn' value='Show Circle'></input>";
  //var theCircleButton = "<input type='button' onClick='console.log(" + lat + "," + lon + "," + circle + ")' class='btn' value='Show Circle'></input>";
  var theCircleButton = "<input type='button' onClick='circleVisible(" + circle + ")' class='btn' value='Show Circle'></input>";


  infoWindow.setContent("<div style='text-align:center;'>" + theCircleButton + "</div>");

  google.maps.event.addListener(marker, "click", function() {
    infoWindow.open(map, marker);
  });

}


function initMap() {
  // Latitude and Longitude for the centre of Australia
  var centreAusLat = -28.080606;
  var centreAusLon = 133.104225;
  var zoomLevelAus = 4;

  // the options used to create the Google Maps object
  var mapOptions = {
    // roughly the centre of Australia
    center: new google.maps.LatLng(centreAusLat, centreAusLon),

    // zoom level set to see all of Australia
    zoom: zoomLevelAus,

    // show a satellite image based map
    mapTypeId: google.maps.MapTypeId.SATELLITE,
  };

  // create the Google Maps object
  var map = new google.maps.Map(
      document.getElementById('map-canvas'), mapOptions
  );

  fillMap(map, centreAusLat, centreAusLon);
}

Answer 1

circle变量需要在全局上下文中定义，才能在HTML单击侦听器函数中访问。

// in global context.
var circle;
function fillMap(map, lat, lon) {
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lon),
    map: map,
    label: "My Marker"
  });

  circle = new google.maps.Circle({
    strokeWeight: 1,
    fillOpacity: 0.0,
    map: map,
    visible: false,
    center: new google.maps.LatLng(lat, lon),
    radius: 10000
  });

proof of concept fiddle
 
var circle;

function fillMap(map, lat, lon) {
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lon),
    map: map,
    label: "My Marker"
  });

  circle = new google.maps.Circle({
    strokeWeight: 1,
    fillOpacity: 0.0,
    map: map,
    visible: false,
    center: new google.maps.LatLng(lat, lon),
    radius: 10000
  });
  map.fitBounds(circle.getBounds());
  var infoWindow = new google.maps.InfoWindow({
    position: marker.getPosition()
  });

  var theCircleButton = "<input type='button' onClick='circleVisible(circle)' class='btn' value='Show Circle'></input>";

  infoWindow.setContent("<div style='text-align:center;'>" + theCircleButton + "</div>");

  google.maps.event.addListener(marker, "click", function() {
    infoWindow.open(map, marker);
  });
}

function circleVisible(circle) {
  circle.setVisible(true);
}

function circleInvisible(circle) {
  circle.setVisible(false);
}

function initMap() {
  // Latitude and Longitude for the centre of Australia
  var centreAusLat = -28.080606;
  var centreAusLon = 133.104225;
  var zoomLevelAus = 4;

  // the options used to create the Google Maps object
  var mapOptions = {
    // roughly the centre of Australia
    center: new google.maps.LatLng(centreAusLat, centreAusLon),

    // zoom level set to see all of Australia
    zoom: zoomLevelAus,

    // show a satellite image based map
    mapTypeId: google.maps.MapTypeId.SATELLITE,
  };

  // create the Google Maps object
  var map = new google.maps.Map(
    document.getElementById('map-canvas'), mapOptions
  );

  fillMap(map, centreAusLat, centreAusLon);
}
html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map-canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>