使用标记google maps javascript移动圆圈_Javascript_Google Maps_Google Maps Api 3

使用标记google maps javascript移动圆圈

javascript google-maps google-maps-api-3

使用标记google maps javascript移动圆圈,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我正在做一个项目，我在地图上画了一个圆圈。我想把圆圈和记号笔一起移动。每当我移动标记时，圆圈都会保持在最后一个位置。我想移动两者，当我移动标记时，圆圈也应该随之移动请告诉我我哪里做错了代码如下： <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

我正在做一个项目，我在地图上画了一个圆圈。我想把圆圈和记号笔一起移动。每当我移动标记时，圆圈都会保持在最后一个位置。我想移动两者，当我移动标记时，圆圈也应该随之移动

请告诉我我哪里做错了

代码如下：

<!DOCTYPE html>      
<html>      
  <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">      
    <meta charset="utf-8">      
    <title>Draw Circle on Marker Click on Google Map</title>      
    <style>      
      html, body {      
        height: 100%;      
        margin: 0;      
        padding: 0;      
      }      
      #map {      
        height: 99%;    
        width: 99%    
      }      
    </style>      
        <script async defer      
        src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>      
        <script>   

var markers = [];  
 var map;  
// First, create an object containing LatLng and population for each city.      
var citymap = {lat:21.002471054356725, lng:79.12353515625};    

function initMap() {      
  var lat_lng = {lat: 22.08672, lng: 79.42444};       
  map = new google.maps.Map(document.getElementById('map'), {      
    zoom: 6,      
    center: lat_lng,      
    mapTypeId: google.maps.MapTypeId.TERRAIN      
  });      

  var marker = new google.maps.Marker({      
    position: lat_lng,   
      draggable:true ,  
    map: map  
  });    

   var cityCircle = new google.maps.Circle({      
      strokeColor: '#FF0000',      
      strokeOpacity: 0.8,      
      strokeWeight: 2,      
      fillColor: '#FF0000',      
      fillOpacity: 0.35,      
      map: map,      
      center: lat_lng,      
      radius: 199999.45454,    
      draggable:true    
    });  

}   


    </script>      
  </head>      
  <body>      
    <div id="map"></div>      
  </body>      
</html>


在标记上画圆圈单击谷歌地图
html，正文{
身高：100%；
保证金：0；
填充：0；
}      
#映射{
身高：99%；
宽度：99%
}      
var标记=[]；
var映射；
//首先，为每个城市创建一个包含LatLng和人口的对象。
var citymap={lat:21.002471054356725，lng:79.12353515625}；
函数initMap（）{
var lat_lng={lat:22.08672，lng:79.42444}；
map=new google.maps.map（document.getElementById（'map'），{
缩放：6，
中心：拉图液化天然气公司，
mapTypeId:google.maps.mapTypeId.TERRAIN
});      
var marker=new google.maps.marker（{
职位：拉图液化天然气公司，
真的，
地图：地图
});    
var cityCircle=new google.maps.Circle（{
strokeColor:“#FF0000”，
笔划不透明度：0.8，
冲程重量：2，
填充颜色：'#FF0000'，
不透明度：0.35，
地图：地图，
中心：拉图液化天然气公司，
半径：199999.45454，
德拉格布尔：是的
});  
}

您只需使用

.addListener（）

函数将拖动事件与圆圈绑定即可

像这样做

function initMap() {      


var lat_lng = {lat: 22.08672, lng: 79.42444};       
  map = new google.maps.Map(document.getElementById('map'), {      
    zoom: 6,      
    center: lat_lng,      
    mapTypeId: google.maps.MapTypeId.TERRAIN      
  });      

  var marker = new google.maps.Marker({      
    position: lat_lng,   
      draggable:true ,  
    map: map  
  });    

   var cityCircle = new google.maps.Circle({      
      strokeColor: '#FF0000',      
      strokeOpacity: 0.8,      
      strokeWeight: 2,      
      fillColor: '#FF0000',      
      fillOpacity: 0.35,      
      map: map,      
      center: lat_lng,      
      radius: 199999.45454,    
      draggable:true    
    });  


   //add event listner on drag event of marker
    marker.addListener('drag', function(event) {                     
        cityCircle.setOptions({center:{lat:event.latLng.lat(),lng:event.latLng.lng()}});        
    });
}