0
479
VistasAPI de Javascript de Google Maps: ocultar el círculo al cargar y alejar y mostrar al hacer clic
Estoy tratando de hacer que la API de mapas de Google funcione bien. Quiero mostrar una vista ampliada de una ubicación, cuando se marca una casilla de verificación, quiero alejar y mostrar un círculo que mostrará el área de servicio.
Logré que el círculo se mostrara al hacer clic, pero no sé cómo controlar el zoom.
Aquí está mi código hasta ahora
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 />
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Si desea que su mapa haga zoom para ajustarse al círculo cuando se muestra, puede usar Map.fitBounds y Circle.getBounds.
Para agregar eso a su código, llámelos cuando muestre el círculo:
$("#layer1_checkbox").change(function () { if (this.checked) { ntucCircle.setMap(map); map.fitBounds(ntucCircle.getBounds()); } else { ntucCircle.setMap(null); } });
fragmento de código:
// 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>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta