Google Maps api Aktualisierung Kreis Genauigkeit

Question

Grundsätzlich wird meine Map Marker aktualisiert, wenn der Benutzer bewegt, aber ich kann nicht sehen, den Radius Kreis größer oder kleiner. Wie kann das gemacht werden? Auch wie können Sie eine Animation hinzufügen, so dass der Marker sich mit ihm bewegt, wenn er sich bewegt?

$(document).ready(function() { 
var map; 

     var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; 
     var icons = { 
      parking: { 
      icon: iconBase + 'parking_lot_maps.png' 
      }, 
      library: { 
      icon: iconBase + 'library_maps.png' 
      }, 
      info: { 
      icon: iconBase + 'info-i_maps.png' 
      } 
     }; 
function initializeMap(){ 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
     zoom: 19, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
} 
function locError(error) { 
// the current position could not be located 
    alert("The current position could not be found!"); 
} 
function setCurrentPosition(position) { 
    var accuracy = position.coords.accuracy; 
    currentPositionMarker = new google.maps.Marker({ 
     map: map, 
     position: new google.maps.LatLng(
      position.coords.latitude, 
      position.coords.longitude 
     ), 
     title: "Current Position", 
     center: position, 
     icon: iconBase + 'parking_lot_maps.png', 
     animation: google.maps.Animation.DROP 
    }); 
    map.panTo(new google.maps.LatLng(
     position.coords.latitude, 
     position.coords.longitude 
    )); 
     var circle = new google.maps.Circle({ 
     map: map, 
    radius: accuracy, // 10 miles in metres 
    fillColor: '#AA0000' 
}); 

circle.bindTo('center', currentPositionMarker, 'position') 
} 

function displayAndWatch(position) { 
    // set current position 
    setCurrentPosition(position); 
    // watch position 
    watchCurrentPosition(position); 
} 
function watchCurrentPosition(position) { 
    var positionTimer = navigator.geolocation.watchPosition(
     function (position) { 
      setMarkerPosition(
      currentPositionMarker, 
      position, 
     ) 
    }); 
} 
function setMarkerPosition(marker, position) { 
    accuracy = position.coords.accuracy; 
    marker.setPosition(
     new google.maps.LatLng(
      position.coords.latitude, 
      position.coords.longitude) 
    ); 
     map.panTo(new google.maps.LatLng(
     position.coords.latitude, 
     position.coords.longitude 
    )); 

} 
function initLocationProcedure() { 
    initializeMap(); 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(displayAndWatch, locError); 
     }else{ 
      alert("Your browser does not support the Geolocation API"); 
    } 
} 

$(document).ready(function() { 
    initLocationProcedure(); 
}); 

Answer 1

function setMarkerPosition(marker, position) { 
    circle.setRadius(position.coords.accuracy); 
    .... 
}