Переключить Показать / Скрыть Google Circle с 1 кнопкой

Question

Я создал круг вокруг центра заявленной позиции в Google Map.Я хочу переключить его одной кнопкой, чтобы показать или скрыть круг / радиус, который я не смог найти по ссылкам, которые я посмотрел в Интернете.

Ссылки: https://developers.google.com/maps/documentation/javascript/shapes Скрыть маркеры наНажмите с Google Maps API показать / скрыть круг на картах Google javascript api

Коды:

<button class="button-red pure-button" onclick="toggleRadius()">

var map;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: {lat: 1.3420894594991328, lng: 103.83490918886719},
    });

    var ntuc = {lat: 1.32805676, lng: 103.9216584};

    var ntucCircle = new google.maps.Circle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        center: ntuc,
        radius: 5000, // in metres
        visible: false
      });

      ntucCircle.bindTo('center', marker, 'position');

  }

Я пробовал 3 способа переключения круга Googleно безрезультатно.

1-й метод:

  function toggleRadius() {
    ntucCircle.set('opacity', ntucCircle.get('opacity') ? null : 0.35);
  }

2-й метод:

  function toggleRadius() {
    ntucCircle.setMap(ntucCircle.getMap() ? null : map);
  }

3-й метод:

  function toggleRadius() {
    if (ntucCircle.getMap() != null) {
        ntucCircle.setMap(null);
    } else {
        ntucCircle.setMap(map);
    }
  }

Я не являюськонечно, что пошло не так.Я ценю любую помощь и надеюсь, что можно ответить на мой вопрос - переключать круг Google с помощью кнопки 1.

Answer 1

Я решил свой вопрос, и вот решение.

<button class="button-red pure-button" onclick="toggleRadius()">

var map;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: {lat: 1.3420894594991328, lng: 103.83490918886719},
});

var ntuc = {lat: 1.32805676, lng: 103.9216584};

var ntucCircle = new google.maps.Circle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    center: ntuc,
    radius: 5000, // in metres
  });

  ntucCircle.setMap(null);


  function toggleRadius() {
    ntucCircle.setMap(ntucCircle.getMap() ? null : map);
  }

Answer 2

С вашим кодом:

function toggleRadius() {
  ntucCircle.setMap(ntucCircle.getMap() ? null : map);
}

Я получаю ошибку javascript: Uncaught TypeError: Cannot read property 'setMap' of undefined, потому что ntucCircle локально для функции initMap, а не в глобальном контексте (где функции обработчика щелчков HTML являютсятребуется).

подтверждение концепции скрипта

фрагмент кода:

// global variables
var map;
var ntucCircle;
var markers = [];

function toggleRadius() {
  ntucCircle.setMap(ntucCircle.getMap() ? null : map);
}

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {
      lat: 1.3420894594991328,
      lng: 103.83490918886719
    },
  });

  var ntuc = {
    lat: 1.32805676,
    lng: 103.9216584
  };

  // initialize the global variable
  ntucCircle = new google.maps.Circle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    center: ntuc,
    radius: 5000, // in metres
  });
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<button class="button-red pure-button" onclick="toggleRadius()">toggle</button>
<div id="map"></div>