在Google地图标记周围添加圆/半径

问题描述:

任何能够帮助我在我的谷歌地图标记周围添加圆/半径的人?在Google地图标记周围添加圆/半径

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 



} 
+1

请点击这里:https://developers.google。 com/maps/documentation/javascript/examples/circle-simple –

+0

嗨,Nikhil,感谢您的回复。我试过了,没有运气。要么破坏代码,要么什么也不做。我不确定是否将代码插入正确的位置。 – Neil

+0

从谷歌示例代码构建测试页,然后尝试逐个添加源代码部分。你也需要确保谷歌地图API_KEY是正确的 –

添加一个固定半径的圆(比如:100)的标记中的每一个,它只是一个声明一个圆圈,一旦你已经宣布你的标记物:

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

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

请注意我已将圆圈附加到标记实例,因此您不需要保留单独的圆形数组来处理它们。

如果您的标记可切换(您想在给定事件后打开/关闭它们),然后将该圆的地图属性绑定到标记的地图上以切换。

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

如果你的标记是可拖动的,你想圆围绕跟随其标记,bidn圆的中心标记位置

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

这就像一个魅力。感谢一堆:) – Neil