Javascript 使用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
        visible: false
      });

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

  }

第二种方法：

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

第三种方法：

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

我不确定出了什么问题。我感谢您提供的任何形式的帮助，希望您能回答我的问题-使用1个按钮切换Google Circle。

使用您的代码：

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

我得到一个javascript错误：

uncaughttypeerror:无法读取未定义的属性“setMap”

，因为

ntucCircle

是

initMap

函数的本地属性，而不是全局上下文中的属性（需要使用HTML点击处理函数）

代码片段：

//全局变量
var映射；
var-ntucCircle；
var标记=[]；
函数toggleRadius（）{
ntucCircle.setMap（ntucCircle.getMap（）？null:map）；
}
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：12，
中心：{
纬度：1.3420894594991328，
液化天然气：103.83490918886719
},
});
变量ntuc={
纬度：1.32805676，
液化天然气：103.9216584
};
//初始化全局变量
ntucCircle=new google.maps.Circle({
strokeColor:“#FF0000”，
笔划不透明度：0.8，
冲程重量：2，
填充颜色：'#FF0000'，
不透明度：0.35，
地图：地图，
中心：ntuc，
半径：5000，//以米为单位
});
}
google.maps.event.addDomListener（窗口“加载”，initMap）
html，
身体，
#地图{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}

切换
我已经解决了自己的问题，下面是解决方案

<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);
  }


var映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：12，
中心：{lat:1.3420894594991328，lng:103.8349091886719}，
});
var ntuc={lat:1.32805676，lng:103.9216584}；
var ntucCircle=new google.maps.Circle({
strokeColor:“#FF0000”，
笔划不透明度：0.8，
冲程重量：2，
填充颜色：'#FF0000'，
不透明度：0.35，
地图：地图，
中心：ntuc，
半径：5000，//以米为单位
});
ntucCircle.setMap（空）；
函数toggleRadius（）{
ntucCircle.setMap（ntucCircle.getMap（）？null:map）；
}
我在发布的代码中收到一个javascript错误：
未捕获引用错误：未定义addMarker
。请提供一个示例来说明您的问题。@geocodezip，我已根据mcve更新了代码。感谢您的通知。在这种情况下，我应该如何使其全局化？它在代码段和f中是全局的他们没有做你所期望的吗？
<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);
  }