Question

在包含300多个标记的地图上，每个标记都有自己的信息框＆amp;图像与数据，加载整个地图＆amp;所有标记同时导致页面速度问题。

这是一个例子 - www.naturesoundmap.com/listing-type/nature-soundscape

我想要做的是：根据起始位置动态提供标记＆amp;预先确定的缩放级别。

请参阅上面的链接以获取示例起始位置 - 在这种情况下，我希望地图仅加载屏幕上可查看的20个左右标记，而不是整个行星上的300多个标记。当用户滚动到地图的新区域时，新标记应在其位置进入视图时动态加载。

我正在使用优雅主题的Wordpress主题'Exploolved'，因此以下代码已经成为主题的一部分。

因为我是一个新手，所以尽可能简单地解释一下！

由于

马克

目前，这是我的代码（这是摘录 - 如果您需要查看整个文件，请告诉我）

mapTypeId: google.maps.MapTypeId.<?php echo esc_js( strtoupper( et_get_option( 'explorable_map_type', 'Roadmap' ) ) ); ?>,
                    zoomControl: true,
                    zoomControlOptions: {
                        position : google.maps.ControlPosition.LEFT_BOTTOM,
                        style : google.maps.ZoomControlStyle.LARGE},
                    panControl: false,
                    streetViewControlOptions: {},
                    overviewMapControl: false,
                    overviewMapControlOptions: {
                        opened : false
                    },
                    scrollwheel: true,
                    streetViewControl: false,
                    mapTypeControl: false,
                    mapTypeControlOptions: {}

                }
            }
        });
        function et_add_marker( marker_order, marker_lat, marker_lng, marker_description ){
            var marker_id = 'et_marker_' + marker_order;
            $et_main_map.gmap3({
                marker : {
                    id : marker_id,
                    latLng : [marker_lat, marker_lng],
                    options: {
                        icon : "<?php echo get_template_directory_uri(); ?>/images/red-marker.png"
                    },
                    events : {
                        click: function( marker ){
                            if ( et_active_marker ){
                                et_active_marker.setAnimation( null );
                                et_active_marker.setIcon( '<?php echo get_template_directory_uri(); ?>/images/red-marker.png' );
                            }
                            et_active_marker = marker;
                            marker.setAnimation(google.maps.Animation.BOUNCE);
                            setTimeout(function(){ marker.setAnimation(null); }, 3750);
                                                        marker.setIcon( '<?php echo get_template_directory_uri(); ?>/images/blue-marker.png' );
                            $(this).gmap3("get").panTo( marker.position );
                            $.fn.et_simple_slider.external_move_to( marker_order );
                        },
                        mouseover: function( marker ){
                            $( '#' + marker_id ).css( { 'display' : 'block', 'opacity' : 0 } ).stop(true,true).animate( { bottom : '15px', opacity : 1 }, 500 );
                        },
                        mouseout: function( marker ){
                            $( '#' + marker_id ).stop(true,true).animate( { bottom : '50px', opacity : 0 }, 500, function() {
                                $(this).css( { 'display' : 'none' } );
                            } );
                        }
                    }
                },
                overlay : {
                    latLng : [marker_lat, marker_lng],
                    options : {
                        content : marker_description,
                        offset : {
                            y:-42,
                            x:-122
                        }
                    }
                }
            });
        }

Answer 1

看起来你每次都要为320点左右的时间调用et_add_marker（）。也许你可以找到一种方法来加载KML文件中的点数据并迭代每个项目以提高速度？

如何管理数据点 - 在Wordpress中作为自定义帖子，还是您难以将它们编码到主题中？

Gmap3 - 根据起始位置动态提供地图标记

1 个答案: