Hinzufügen eines Kreises/Radius um Google Map Markierungen

Question

Kann mir jemand helfen, einen Kreis/Radius um meine Google Map Marker hinzuzufügen?

function createMarker (size, i,id,lat,lng,pin,title,counter,image,price,single_first_type,single_first_action,link,rooms,baths,cleanprice,single_first_type_name, single_first_action_name){ 


    var myLatLng = new google.maps.LatLng(lat,lng); 


    var marker = new google.maps.Marker({ 
     position:   myLatLng, 
     map:    map, 
     icon:    custompin(pin), 
     shape:    shape, 
     title:    title, 
     zIndex:    counter, 
     image:    image, 
     idul:    id, 
     price:    price, 
     category:   single_first_type, 
     action:    single_first_action, 
     link:    link, 
     infoWindowIndex : i, 
     rooms:    rooms, 
     baths:    baths, 
     cleanprice:   cleanprice, 
     size:    size, 
     category_name:  single_first_type_name, 
     action_name:  single_first_action_name 
    }); 





    gmarkers.push(marker); 
    bounds.extend(marker.getPosition()); 
    google.maps.event.addListener(marker, 'click', function(event) { 

     // new_open_close_map(1); 

     map_callback(new_open_close_map); 
     google.maps.event.trigger(map, 'resize'); 

     if(this.image===''){ 
      info_image='<img src="' + mapfunctions_vars.path + '/idxdefault.jpg" alt="image" />'; 
     }else{ 
      info_image=this.image; 
     } 

     var category   = decodeURIComponent (this.category.replace(/-/g,' ')); 
     var action   = decodeURIComponent (this.action.replace(/-/g,' ')); 
     var category_name = decodeURIComponent (this.category_name.replace(/-/g,' ')); 
     var action_name  = decodeURIComponent (this.action_name.replace(/-/g,' ')); 
     var in_type   = mapfunctions_vars.in_text; 
     if(category==='' || action===''){ 
      in_type=" "; 
     } 

     var infobaths; 
     if(this.baths!=''){ 
      infobaths ='<span id="infobath">'+this.baths+'</span>'; 
     }else{ 
      infobaths =''; 
     } 

     var inforooms; 
     if(this.rooms!=''){ 
      inforooms='<span id="inforoom">'+this.rooms+'</span>'; 
     }else{ 
      inforooms=''; 
     } 

     var infosize; 
     if(this.size!=''){ 
      infosize ='<span id="infosize">'+this.size; 
      if(mapfunctions_vars.measure_sys==='ft'){ 
       infosize = infosize+ ' ft<sup>2</sup>'; 
      }else{ 
       infosize = infosize+' m<sup>2</sup>'; 
      } 
      infosize =infosize+'</span>'; 
     }else{ 
      infosize=''; 
     } 


     var title= this.title.substr(0, 45) 
     if(this.title.length > 45){ 
      title=title+"..."; 
     } 

     infoBox.setContent('<div class="info_details"><span id="infocloser" onClick=\'javascript:infoBox.close();\' ></span><a href="'+this.link+'">'+info_image+'</a><a href="'+this.link+'" id="infobox_title">'+title+'</a><div class="prop_detailsx">'+category_name+" "+in_type+" "+action_name+'</div><div class="prop_pricex">'+this.price+infosize+infobaths+inforooms+'</div></div>'); 
     infoBox.open(map, this);  
     map.setCenter(this.position); 






     switch (infobox_width){ 
      case 700: 

       if(mapfunctions_vars.listing_map === 'top'){ 
        map.panBy(100,-150); 
       }else{ 
        if(mapfunctions_vars.small_slider_t==='vertical'){ 
         map.panBy(300,-300); 

        }else{ 
         map.panBy(10,-110); 
        }  
       } 

       vertical_off=0; 
       break; 
      case 500: 
       map.panBy(50,-120); 
       break; 
      case 400: 
       map.panBy(100,-220); 
       break; 
      case 200: 
       map.panBy(20,-170); 
       break;    
      } 

      if (control_vars.show_adv_search_map_close === 'no') { 
       $('.search_wrapper').addClass('adv1_close'); 
       adv_search_click(); 
      } 



      close_adv_search(); 
    });/////////////////////////////////// end event listener 



} 

Answer 1

Hinzufügen einen Kreis mit einem festen Radius (zB: 100) zu jedem Ihres Marker es ist nur eine Frage einen Kreis zu erklären, wenn Sie bereits Ihren Marker erklären:

gmarkers.push(marker); 
bounds.extend(marker.getPosition()); 

marker.Circle = new google.maps.Circle({ 
    center:marker.getPosition(), 
    radius: 100, 
    map: map 
}); 

Bitte beachten Sie, ich Sie haben den Kreis an die Marker-Instanz angehängt, so dass Sie kein separates Kreis-Array mehr haben müssen, um sie anschließend zu bearbeiten.

Wenn Ihre Markierungen umschaltbar sind (Sie möchten sie nach einem bestimmten Ereignis ein-/ausschalten), dann binden Sie das Kartenattribut dieses Kreises an die Karte des Markers, um ebenfalls umgeschaltet zu werden.

marker.Circle.bindTo('map', marker); 

Und wenn Ihre Markierungen sind ziehbar und Sie wollen, dass der Kreis seine Markierung um zu folgen, bidn die Mitte des Kreises der Markerposition

marker.Circle.bindTo('center', marker, 'position');