Trying to get google map with user set radius

问题

I am tring to allow the user to set the radius from the users center location of a google map. I have most of the nuts and bolts but can't get it over the line. Here is the code I'm using. Any help is much appreciated.

css AND html code

Search Radius:
    <input type="range" name="search_radius" id="search_radius" min="10" max="100">
    <script>
        // Add a Circle overlay to the map.
        circle = new google.maps.Circle({
            map: map,
            radius: 10
        });

        // Since Circle and Marker both extend MVCObject, you can bind them
        // together using MVCObject's bindTo() method.  Here, we're binding
        // the Circle's center to the Marker's position.
        // http://code.google.com/apis/maps/documentation/v3/reference.html#MVCObject
        circle.bindTo('center', marker, 'position');
        }


        $("#search_radius").slider({
            orientation: "vertical",
            range: "min",
            max: 3000,
             min: 100,
            value: 500,
            slide: function(event, ui) {
                updateRadius(circle, ui.value);
            }
        });

        function updateRadius(circle, rad) {
            circle.setRadius(rad);
        }

        // Register an event listener to fire when the page finishes loading.
        google.maps.event.addDomListener(window, 'load', init);

    </script



<center>
    <script>getLocation();</script>
    <button onclick="getLocation()">Get My Location</button><p id="map"></p>

    Search Radius:
    <input type="range" name="search_radius" id="search_radius" min="10" max="100">
    <script>
        // Add a Circle overlay to the map.
        circle = new google.maps.Circle({
            map: map,
            radius: 10
        });

        // Since Circle and Marker both extend MVCObject, you can bind them
        // together using MVCObject's bindTo() method.  Here, we're binding
        // the Circle's center to the Marker's position.
        // http://code.google.com/apis/maps/documentation/v3/reference.html#MVCObject
        circle.bindTo('center', marker, 'position');
        }


        $("#search_radius").slider({
            orientation: "vertical",
            range: "min",
            max: 3000,
             min: 100,
            value: 500,
            slide: function(event, ui) {
                updateRadius(circle, ui.value);
            }
        });

        function updateRadius(circle, rad) {
            circle.setRadius(rad);
        }

        // Register an event listener to fire when the page finishes loading.
        google.maps.event.addDomListener(window, 'load', init);

    </script

<!--Check Geolocation Support -->
<script>
var x = document.getElementById("map");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
     var mapDiv = document.getElementById('map');
    var map = new google.maps.Map(mapDiv, {
      center: {lat: position.coords.latitude, lng: position.coords.longitude},
      zoom: 12
    });
}

function initMap() {
     var mapDiv = document.getElementById('map');
    var map = new google.maps.Map(mapDiv, {
      center: {lat: 53.3498, lng: -6.2603},
      zoom: 6
    });

  }

</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

回答1:

You are not updating the map after the circle's radius is changed. I haven't tested the code below.

function updateRadius(circle, rad) {
  circle.setRadius(rad);
  map.fitBounds(circle.getBounds());
}

Documentation on map.fitBounds is here.

You should also probably just have one map object that in a scope that is accessible by all your functions and just set the center and zoom options on it instead of creating a new map object for the different options. I also don't see in the current code how the map object is accessible to the first script code that adds the circle.

var x = document.getElementById("map");
var map = new google.maps.Map(mapDiv, {
  center: {lat: 53.3498, lng: -6.2603},
  zoom: 6
});

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;

    map.center = {lat: position.coords.latitude, lng:     position.coords.longitude};
    map.zoom = 12;
  });
}

来源：https://stackoverflow.com/questions/37997093/trying-to-get-google-map-with-user-set-radius