在包含php的Google地图上显示不同的图标

问题描述

我正在尝试为每个添加的项映射不同样式的图标(标记)。

我已经成功地恢复了为图标添加的术语,但是我不知道如何为每个标记更改它。

您可以在这里看到它:https://www.netao.website/polimmo/les-programmes/

我希望拥有: “ Type de bien” =地形:黑色图标 “ Type de bien” =新公寓,决策局,新单位:橙色图标。

在此页面中,当我不选择地图下方时,所有程序均处于视图状态,但全部带有橙色图标(地形和其他图标)

当我仅在“ type de bien”上选择地形时(只需等待几秒钟-自动提交),没错,图标为黑色……

有什么主意吗?感谢您的帮助。

这是我的代码

        <script type="text/javascript">
                (function($) {
                        
                        /*
                        *  new_map
                        *
                        *  This function will render a Google Map onto the selected jQuery element
                        *
                        *  @type    function
                        *  @date    8/11/2013
                        *  @since   4.3.0
                        *
                        *  @param   $el (jQuery element)
                        *  @return  n/a
                        */
                        
                        function new_map( $el ) {
                        
                        // var
                        var $markers = $el.find('.marker');
                        
                        // vars
                        var args = {
                            zoom        : 16,center      : new google.maps.LatLng(0,0),mapTypeId   : google.maps.MapTypeId.ROADMAP
                        };
                            
                        // create map               
                        var map = new google.maps.Map( $el[0],args);
                        
                        // add a markers reference
                        map.markers = [];
                            
                        // add markers
                        $markers.each(function(){
                        
                            add_marker( $(this),map );
                        
                        });
                        
                        // center map
                        center_map( map );
                        
                        // return
                        return map;
                        }
                        
                        /*
                        *  add_marker
                        *
                        *  This function will add a marker to the selected Google Map
                        *
                        *  @type    function
                        *  @date    8/11/2013
                        *  @since   4.3.0
                        *
                        *  @param   $marker (jQuery element)
                        *  @param   map (Google Map object)
                        *  @return  n/a
                        */
                        
                        function add_marker( $marker,map ) {
                        
                            // var
                            var latlng = new google.maps.LatLng( $marker.attr('data-lat'),$marker.attr('data-lng') );
                        
                        
                            <?PHP
                                while ( $mdf_loop->have_posts()) : $mdf_loop->the_post();
                                    $ids = get_the_ID ();
                                    $terms = get_the_terms( $ids,'types' );
                                        foreach( $terms as $term ) {
                                            $valeur_term = $term->slug ;
                                        }

                                endwhile;
                            ?>
                        
                            var iconPicto = '<?PHP echo get_template_directory_uri(); ?>/assets/images/marker-listing-<?PHP echo $valeur_term; ?>@1x.png';
                        
                            
                            var marker = new google.maps.Marker({
                                position    : latlng,map         : map,icon        : iconPicto,});
                        
                        
                            // add to array
                            map.markers.push( marker );
                            
                            // if marker contains HTML,add it to an infoWindow
                            if( $marker.html() )
                                {
                                    
                                    // create info window
                                    var infowindow = new google.maps.InfoWindow({
                                        content     : $marker.html()
                                    });
                            
                                    // show info window when marker is clicked
                                    google.maps.event.addListener(marker,'click',function() {
                            
                                        infowindow.open( map,marker );
                            
                                    });
                                            
                                        
                                }
                            
                            }
                        
                        
                        /*
                        *  center_map
                        *
                        *  This function will center the map,showing all markers attached to this map
                        *
                        *  @type    function
                        *  @date    8/11/2013
                        *  @since   4.3.0
                        *
                        *  @param   map (Google Map object)
                        *  @return  n/a
                        */
                        
                        function center_map( map ) {
                        
                        // vars
                        var bounds = new google.maps.LatLngBounds();
                        
                        // loop through all markers and create bounds
                        $.each( map.markers,function( i,marker ){
                        
                            var latlng = new google.maps.LatLng( marker.position.lat(),marker.position.lng() );
                        
                            bounds.extend( latlng );
                        
                        });
                        
                        // only 1 marker?
                        if( map.markers.length == 1 )
                        {
                            // set center of map
                            map.setCenter( bounds.getCenter() );
                            map.setZoom( 16 );
                        }
                        else
                        {
                            // fit to bounds
                            map.fitBounds( bounds );
                        }
                        
                        }
                        
                        /*
                        *  document ready
                        *
                        *  This function will render each map when the document is ready (page has loaded)
                        *
                        *  @type    function
                        *  @date    8/11/2013
                        *  @since   5.0.0
                        *
                        *  @param   n/a
                        *  @return  n/a
                        */
                        
                        $(document).ready(function(){
                        
                        $('.acf-map').each(function(){
                        
                            // create map
                            map = new_map( $(this) );
                        
                        });
                        
                        });
                        
                        })(jQuery);
            </script>
                         
                        
            <div id="listing_map" class="acf-map">

                <?PHP while ( $mdf_loop->have_posts()) : $mdf_loop->the_post();
                        
                                $location = get_field('acf_googlemap');
                                $gtemp = explode (',',implode($location));
                                $coord = explode (',implode($gtemp));
                                $ids = get_the_ID ();
                                $latitude = get_field('latitude'); 
                                $longitude = get_field('longitude'); 
                                $ville = get_post_meta ($ids,'ville',true);
                                $soustitre = get_post_meta($post->ID,'sous-titre',true);
                                //$extrait = get_post_meta($post->ID,'extrait',true);
                                $terms = get_the_terms( $ids,'types' );
                                foreach( $terms as $term ) {
                                    $valeur_term = $term->slug ;
                                }
                                ?>
                                
                                <div class="marker" data-lat="<?PHP echo $location[lat]; ?>" data-lng="<?PHP echo $location[lng]; ?>">
                                    
                                    <?PHP the_post_thumbnail(array(60,60),array( 'class' => 'vignette_list_adherent' ) ); ?>
                                    
                                    <p class="address"><strong><?PHP the_title(); ?></strong><?PHP echo ' - ' .$ville ; ?><br />
                                    <?PHP echo $soustitre . '<strong> - '. $valeur_term . '</strong>'; ?>

                                    <a class="lien_fiche" href="<?PHP echo the_permalink(); ?>">Voir la fiche</a></p>       
                                </div>
                
    
                    <?PHP endwhile; ?>
                            
            </div><!-- .acf-map -->
                    
                    
<!-- End Insertion map -->

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)