사용자 설정 반경으로 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()); 
} 

지도상의 문서는 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; 
    }); 
}