如何获取圆圈边界的经度和纬度来创建该标记？

Question

这是我的地图工厂

我画了一个带有多个标记的圆，但我想在圆的末端添加一个标记（/圆的轮廓）以便动态改变半径。但我无法设置标记

sidemenu.factory('Map', function($rootScope , $compile,$location,mapPlacesGeocoder,centerCoordinatesForMap,getMapObject){ 
    // alert($location.path()); 

    var canvas = document.getElementById('map'), 
     defaults = { 
      center: new google.maps.LatLng(0,0), 
      zoom:  4, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

    return { 
     init:function(properties , scope) { 
      mapPlacesGeocoder.getCoOrdinates(scope.address,function (coOrdinates) { 
       var map=getMapObject.mapEntity(); 
      centerCoordinatesForMap.setMapObject(map);  
      var center = new google.maps.LatLng(coOrdinates.lat, coOrdinates.lng); 
      centerCoordinatesForMap.setMapcenter(center); 
       var circle=getMapObject.circleEntity(); 
       centerCoordinatesForMap.setCircleObject(circle); 
        var bounds = getMapObject.boundsEntity(); 
      centerCoordinatesForMap.setBoundObject(bounds); 

       var infoWindow = new google.maps.InfoWindow({  
        boxStyle: { 
         width: "0%", 
         backgroundColor:'#ccc' 
         }}); 


       var icon = {   
          url: "../img/square.png", // url 
          scaledSize: new google.maps.Size(10, 10), // scaled size 
          origin: new google.maps.Point(0, 0), // origin 
          anchor: new google.maps.Point(0, 0) // anchor 
          }; 

       var markerCenter = new google.maps.Marker({   
        draggable: true, 
        title: 'Drag me!', 
         map: map, 
         position:center 
        }); 



     var sizer = new google.maps.Marker({  
      draggable: true, 
      title: 'Drag me!', 
      position:circle.getBounds(), 
      map: map 
      }); 




       circle.bindTo('center', markerCenter, 'position'); 

     google.maps.event.addListener(markerCenter, 'dragend', function() { 
     latLngCenter = new google.maps.LatLng(markerCenter.position.lat(), markerCenter.position.lng()); 
     bounds = circle.getBounds(); 

     console.log(markerCenter.position.lat()); 
       console.log(markerCenter.position.lng()); 
     console.log(circle.getRadius()); 

      }); 

       for (var i = 0, length = properties.length; i < length; i++) { 

        var latLng = new google.maps.LatLng(properties[i].property_latitude, properties[i].property_longitude); 

        // Creating a marker and putting it on the map 
        scope.marker = new google.maps.Marker({ 
         position:latLng, 
         map: map, 
         /* icon:{ 
          url:"/img/marker.jpg", 
          size: new google.maps.Size(80,80), 
          origin: new google.maps.Point(0, 0), 
          anchor: new google.maps.Point(24/2,24/2), 
          scaledSize: new google.maps.Size(40, 80) 
          }*/ 
          }); 

        bounds.extend(scope.marker.position); 

        google.maps.event.addListener(
         scope.marker, 
         'mouseover', 
         (function(marker , scope, property,compile,location){ 
          return function(){ 
           var content = '<div id="google-popup">' + 
            '<div class="infoWindowContent">' +property.hp_location.location_name +'</div>'+ 
            '<div class="infoWindowContent" ng-click="projectGallery()">' + property.hp_city.city_name +'</div>'+ 
            '<a href=#'+location.path()+'?property_id='+property.propertyId+' class="active">' + property.property_name +'</a>' + '</div>'; 

           var compiled = compile(content)(scope); 
           scope.$apply(); 
           infoWindow.setContent(compiled[0].innerHTML); 
           infoWindow.open(Map , marker); 
          }; 
         })(scope.marker,scope,properties[i],$compile,$location) 
        ); 


        if(scope.city==true) { 
         circle.setMap(null); 
         map.fitBounds(bounds); 
         } 
         else if(scope.city==false) { 
         map.fitBounds(circle.getBounds()); 

         } 

        var listener = google.maps.event.addListener(map, "idle", function() { 
         google.maps.event.removeListener(listener); 

        }); 


        var listenerdragstart = google.maps.event.addListener(map, "zoom_changed", function() { 

         google.maps.event.clearListeners(map, 'idle'); 
         google.maps.event.removeListener(listenerdragstart); 
        }); 


        } 

      }) 
     }//init 
    };//return 

});// 

那么如何创建这个标记的位置（经度和纬度）？

var sizer = new google.maps.Marker({  
     draggable: true, 
     title: 'Drag me!', 
     position:circle.getBounds(), 
     map: map 
}); 

什么我必须设置这个标记的位置来创建这个圆的轮廓？

Answer 1

google.maps.Marker的的position属性应该是google.maps.LatLng类型不google.maps.LatLngBounds其中circle.getBounds()回报。

但是，您可以获取边界的东北角和西南角的坐标。在你的情况下，你可以做的是获得东北角的经度，以获得圆圈的最右侧点并将其设置到圆的中心纬度。这样，得到的位置将位于右侧圆圈的边界上。

所以，你会做这样的事情：

position: new google.maps.LatLng(circle.getCenter().lat(), circle.getBounds().getNorthEast().lng()),