Google 地图 Javascript API - 加载时隐藏圆圈，单击时缩小并显示

Question

我正在努力让 Google 地图 API 发挥出色。我想显示一个位置的放大视图，选中复选框后，我想缩小并显示一个圆圈，该圆圈将显示服务区域。

我已经设法在点击时显示圆圈，但我不知道如何控制缩放。

到目前为止，这是我的代码

JS

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

$("#layer1_checkbox").change(function () {
  ntucCircle.setMap(ntucCircle.getMap() ? null : map);
});

$("#layer1_checkbox").change(function () {
  if (this.checked) {
    ntucCircle.setMap(map);
  } else {
    ntucCircle.setMap(null);
  }
});

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,

    center: ntuc,
    radius: 5000, // in metres
    visible: null,
  });
}
google.maps.event.addDomListener(window, "load", initMap);

HTML

Layer 1 <input id="layer1_checkbox" type="checkbox" unchecked />

Answer 1

如果您希望地图在显示时缩放以适合圆圈，您可以使用 Map.fitBounds 和 Circle.getBounds。
要将其添加到您的代码中，请在显示圆圈时调用它们：

$("#layer1_checkbox").change(function () {
  if (this.checked) {
    ntucCircle.setMap(map);
    map.fitBounds(ntucCircle.getBounds());
  } else {
    ntucCircle.setMap(null);
  }
});

proof of concept fiddle

代码片段：

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

$("#layer1_checkbox").change(function () {
  ntucCircle.setMap(ntucCircle.getMap() ? null : map);
});

$("#layer1_checkbox").change(function () {
  if (this.checked) {
    ntucCircle.setMap(map);
    map.fitBounds(ntucCircle.getBounds());
  } else {
    ntucCircle.setMap(null);
  }
});

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,

    center: ntuc,
    radius: 5000, // in metres
    visible: null,
  });
}
google.maps.event.addDomListener(window, "load", initMap);

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 90%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
  Layer 1 <input id="layer1_checkbox" type="checkbox" unchecked />
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly&channel=2"
      async
    ></script>
  </body>
</html>

Google 地图 Javascript API - 加载时隐藏圆圈，单击时缩小并显示

Google Maps Javascript API - Hide circle on load and zoom out and show on click

javascript

google-maps

google-maps-api-3