尝试获取具有用户设置半径的 google 地图

Question

我想允许用户设置 google 地图的用户中心位置的半径。我有大部分的具体细节，但无法完成。这是我正在使用的代码。非常感谢任何帮助。

css 和 html 代码

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>

Answer 1

您不是在更改圆的半径后更新地图。我还没有测试下面的代码。

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

关于 map.fitBounds 的文档是 here。

您可能还应该只有一个地图对象，该对象在您的所有函数都可以访问的范围内，并且只需在其上设置中心和缩放选项，而不是为不同的选项创建一个新的地图对象。我在当前代码中也看不到添加圆圈的第一个脚本代码如何访问地图对象。

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

尝试获取具有用户设置半径的 google 地图

Trying to get google map with user set radius

javascript

google-maps

slider