GoogleMapsJavascriptAPI-加載時隱藏圓圈并縮小并在點擊時顯示-有解無憂

我正在嘗試讓 Google 地圖 API 發揮出色。我想鑒于一個位置，當檢查復選框時，我想縮小并顯示將顯示服務區域的圓圈。

我設法讓圓圈在點擊時顯示，但我不知道如何控制縮放。

到目前為止，這是我的代碼

// 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 />

uj5u.com熱心網友回復：

如果您希望地圖在顯示時縮放以適合圓圈，您可以使用 Map.fitBounds 和 Circle.getBounds。要將其添加到您的代碼中，請在顯示圓圈時呼叫它們：

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

Google Maps Javascript API - 加載時隱藏圓圈并縮小并在點擊時顯示

代碼片段：

// 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/405801.html

標籤：

上一篇：如何在Flutter的GoogleMap上設定正確大小的標記？

下一篇：如何在谷歌地圖上將大洋洲更改為澳大利亞？