javascript - 在 Google map 标记周围添加圆/半径

Question

有人可以帮助我在我的谷歌地图标记周围添加一个圆/半径吗？

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

向每个标记添加一个固定半径(例如:100)的圆，只需在声明标记后声明一个圆即可:

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

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

请注意，我已将圆附加到标记实例，这样您就不需要保留单独的圆数组来处理它们。

如果您的标记是可切换的(您希望在给定事件后打开/关闭它们)，则将该圆圈的 map 属性绑定(bind)到也要切换的标记的 map 。

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

如果您的标记是可拖动的，并且您希望圆圈跟随其标记，请将圆圈的中心定位到标记位置

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