1

我面临一个关于谷歌地图单标记针位置的奇怪问题。我到底怎么了?我正在使用 infobubble.js 和 gmap3.js 在 Google 地图上创建带有信息窗口的集群标记。每件事都运行良好,但我面临的一个问题是,当我单击群集时,信息窗口在当前单击的群集上打开,这是正确的,但是当我单击单个标记引脚然后单击群集时,单个标记引脚会跳转到当前点击的集群。

工作小提琴是点击这里 现场网站:点击这里

信息气泡js:

<script type='text/javascript' src="http://londonescort.se/wp-content/themes/javo-directory/assets/js/google.map.infobubble.js?f42488"></script>

我使用这段代码初始化这个js

var myList=0;
var mainPos=0;
var groupLtdLnt='';
var marker_id_default='';

jQuery( function($){

    var javo_search_func = {
        /*****************************************
        **
        ** Variables
        **
        *****************************************/
        el                  : $('.javo-search-map-area')
        , distance_unit     : $('[javo-map-distance-unit]').val()
        , distance          : $('[javo-map-distance-unit]').val() == 'mile' ? 1609.344 : 1000
        , distance_max      : $('[javo-map-distance-max]').val()
        , ob_ib             : null
        , markers           : null
        , bound             : new google.maps.LatLngBounds()
        , options:{
            /* InfoBubble Option */
            info_bubble:{
                minWidth:362
                , minHeight:180
                , overflow:true
                , shadowStyle: 1
                , padding: 5
                , borderRadius: 10
                , arrowSize: 20
                , borderWidth: 1
                , disableAutoPan: false
                , hideCloseButton: false
                , arrowPosition: 50
                , arrowStyle: 0



            }
            /* Display Ratings */
            , raty:{
                starOff: '<?php echo JAVO_IMG_DIR?>/star-off-s.png'
                , starOn: '<?php echo JAVO_IMG_DIR?>/star-on-s.png'
                , starHalf: '<?php echo JAVO_IMG_DIR?>/star-half-s.png'
                , half: true
                , readOnly: true
            }
            /* Map */
            , map_init:{
                map:{
                    options:{
                        center: new google.maps.LatLng(0, 0)
                        , mapTypeControl    : false
                        //,draggable: false
                        //, scrollwheel: false
                    }
                }
                , panel:{
                    options:{
                        content :"<div class='btn-group'><a class='btn btn-default active' data-map-move-allow><i class='fa fa-unlock'></i></a></div>"
                        ,right  : true
                        , middle: true

                    }
                }
                , marker:{
                    events:{}
                    , cluster:{
                        radius:100
                        , 0:{ content:'<div class="javo-map-cluster admin-color-setting">CLUSTER_COUNT</div>', width:52, height:52 }
                        , events:{}
                    }
                }
            }
            /* Map Style & P.O.I InfoBox Delete */
            , map_style:[
                {
                    featureType: "poi",
                    elementType: "labels",
                    stylers: [
                        { visibility: "off" }
                    ]

                }
            ]
        }
        /*****************************************
        **
        ** Main Funciton
        **
        *****************************************/
        , init:function(){


            /* Get Self Oboject */
            var $object = this;

            /* Define InfoBubble Plug-in */
            this.ob_ib = new InfoBubble( this.options.info_bubble );

            /* Set Marker Variable */
            this.markers = new Array();

            var is_poi_hidden = $('[name="javo_google_map_poi"]').val() == 'off';

            /* Get Marker Informations */
            this.sanitize_marker    = JSON.parse( $('input[name="javo-this-term-all-item"]').val() );

            /* Get Marker Informations */
            $.each( this.sanitize_marker, function(i, k)
            {
                if( k.lat != "" && k.lng != "" )
                {
                    $object.markers.push({
                        id          : '#javo_map_tmp_' + i
                        , latLng    : new google.maps.LatLng( k.lat, k.lng )
                        , options   : { icon: k.icon }
                        , data      : k
                    });
                }


            });

            /* Set bind Markers */
            this.options.map_init.marker.values = this.markers;
            //this.options.map_init.marker.events.clickMap = this.marker_cluster_click;
            this.options.map_init.marker.events.click = this.marker_click;
            //this.options.map_init.marker.events.click = this.marker_single_click;
            this.options.map_init.marker.cluster.events.click = this.cluster_click;



            /* Define Google Map for Div Element */
            this.el.height(500).gmap3( this.options.map_init, 'autofit' );

            this.map = this.el.gmap3('get');

            if( is_poi_hidden )
            {
                // Map Style
                this.map_style = new google.maps.StyledMapType(
                    this.options.map_style
                    , { name : 'Javo Single Item Map' }
                );
                this.map.mapTypes.set('map_style', this.map_style);
                this.map.setMapTypeId('map_style');
            }

            /* Set Ratings */
            $('.javo_archive_list_rating').each(function(){
                $object.options.raty.score = $(this).data('score');
                $(this).raty( $object.options.raty ).width('');
            });
            var javo_search_position_slide_option = {
                start: [300]
                , step: 1
                , range:{ min:[1], max:[ parseInt( $object.distance_max ) ] }
                , serialization:{
                    lower:[
                        $.Link({
                            target: $('[javo-wide-map-round]')
                            , format:{ decimals:0 }
                        })
                        , $.Link({
                            target: '-tooltip-<div class="javo-slider-tooltip"></div>'
                            , method: function(v){
                                $(this).html('<span>' + v + '&nbsp;' + $object.distance_unit + '</span>');
                            }, format:{ decimals:0, thousand:',' }
                        })
                    ]
                }
            };
            /*
            Geo Location Slider Block

            $('[data-javo-search-form]')
                .find(".javo-position-slider")
                    .noUiSlider(javo_search_position_slide_option)
                    .on('set', $object.geolocation);
            */

            ; $( document ).on('click', '[data-map-move-allow]', this.lock_map );


        }
        , lock_map: function(e){

            var $object = javo_search_func;
            $( this ).toggleClass('active');
            if( $( this ).hasClass('active') )
            {
                // Allow
                $object.map.setOptions({ draggable: true, scrollwheel: true });
                $( this ).find('i').removeClass('fa fa-lock').addClass('fa fa-unlock');
            }else{
                // Not Allowed
                $object.map.setOptions({ draggable:false, scrollwheel: false });
                $( this ).find('i').removeClass('fa fa-unlock').addClass('fa fa-lock');
            }

        }
        , geolocation: function(){
            var $this       = $(this);
            var $object     = javo_search_func;
            var $radius = $('[javo-wide-map-round]').val();


            $object.el.gmap3({
                getgeoloc:{
                    callback:function(latlng){
                        if( !latlng ){
                            $.javo_msg({content:'Your position access failed.'});
                            return false;
                        };
                        $(this).gmap3({ clear:'circle' });
                            $(this).gmap3({
                                map:{
                                    options:{ center:latlng, zoom:12 }
                                }, circle:{
                                    options:{
                                        center:latlng
                                        , radius:$radius * parseFloat( $object.distance )
                                        , fillColor:'#464646'
                                        , strockColor:'#000000'
                                    }
                                }
                            });
                            $(this).gmap3({
                                get:{
                                    name: 'circle'
                                    , callback: function(c){

                                        $(this).gmap3('get').fitBounds( c.getBounds() );
                                    }
                                }
                            });


                    }


                }
            });

        }
        , cluster_click: function(c, e, d){

            var $object = javo_search_func;

            var $map = $(this).gmap3('get');
            var maxZoom = new google.maps.MaxZoomService();
            var c_bound = new google.maps.LatLngBounds();

            // IF Cluster Max Zoom ?
            maxZoom.getMaxZoomAtLatLng( d.data.latLng , function( response ){
                //if( response.zoom <= $map.getZoom() && d.data.markers.length > 0 )
                //{

                    var str = '';
                    str += "<div class='list-group'>";

                    str += "<a class='list-group-item disabled text-center'>";
                        str += "<strong>";
                            str += $("[javo-cluster-multiple]").val();
                        str += "</strong>";
                    str += "</a>";
                    var p=1;
                    $.each( d.data.markers, function( i, k ){
                        myList=p;


                        str += "<a href=\"javascript:javo_search_func.cluster_trigger('" + k.id +"');\" ";
                            str += "class='list-group-item'>";
                            str += k.data.post_title + " (" + k.data.category + ' / ' + k.data.location + ")";
                        str += "</a>";
                        p++;
                    });


                    str += "</div>";
                    groupLtdLnt=c.main.getPosition();
                    console.log(c.main.getPosition());
                        $object.ob_ib.setContent( str );
                        $object.ob_ib.setPosition( c.main.getPosition() );
                        $object.ob_ib.open( $map );


            if( response.zoom <= $map.getZoom() )
                {

                   console.log('ZoomOut');
                    console.log(c.main.getPosition());
                    }  

                    else{
                    $map.setCenter( c.main.getPosition() );
                    //console.log('ZoominOut');
                    //console.log(c.main.getPosition());
                    //$map.setZoom( $map.getZoom()  );
                }
            } );
        }
        , cluster_trigger: function( marker_id )
        {

            this.el.gmap3({
                get:{
                    name        : "marker"
                    , id        : marker_id
                    , callback  : function(m){
                      marker_id_default=marker_id;
                        google.maps.event.trigger(m, 'click');


                    }
                }
            });
        },

     marker_click: function( m, e, c )
        {
    var instance=   $(this);

    //console.log(c);
        var obj = javo_search_func;



            var map = instance.gmap3( 'get' );
            console.log(m.getPosition());
            var postion= m.getPosition();
             var ltd=postion.A;
             var lng=postion.F;
           console.log(ltd+','+lng);
            //map.setZoom( map.getZoom()+2 );
             obj.ob_ib.setContent( '<h1> This is single marker</h1>');
             map.setCenter(m.getPosition());

                var zoom= map.getZoom();


      if(e==undefined)
        {
       obj.ob_ib.open(map);
        }
        else
        {
          obj.ob_ib.open(map,m);
        }


            // map.setCenter( m.getPosition() ); 

        }
    };
    javo_search_func.init();
    window.javo_search_func = javo_search_func;
} );

请帮我解决这个问题。谢谢

4

0 回答 0