2017-03-28 136 views
-1

任何能夠幫助我在我的谷歌地圖標記周圍添加圓/半徑的人?在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是正確的 –

回答

1

添加一個固定半徑的圓(比如: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

相關問題