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

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 类型，而不是 circle.getBounds() 返回的 google.maps.LatLngBounds。

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

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

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