@Kanasimy

Как не выводить маркеры на карту перед кластеризацией?

Вывожу на карту google большое количество маркеров >2000 с помощью MarkerWithLabel.js, для удобства отображения используется кластеризация markerclusterplus.js Надеялась что с кластеризацией будут меньшие тормоза, так как не будут на карту выводиться сразу тысяч маркеров.
Но оказалось, что перед тем как объединиться в кластеры маркеры выводятся на карту.
Можно данное поведение как-то оптимизировать, и выводить сразу кластеры?
Ниже приведен код который выводит кластеры:
function setMarkers(map, locations) {				//function to set markers and balloons
            console.log(locations);
			var listShopsResult='',
				lenghtLocations = locations.length;

            if (lenghtLocations > 1) {
				for (var i = 0; i < lenghtLocations; i++) {

					var location = locations[i];

					var myLatLng = new google.maps.LatLng(location[1], location[2]);
					var brand = location[7];
					var store = location[3];






					var image = {										//  marker icon options
						//url: location[3],
                        url: '<?php echo $cp_sale_config['default_marker_url'];?>',
						size: new google.maps.Size(location[11][0],location[11][1]),
						// The origin for this image is 0,0.
						origin: new google.maps.Point(<?php echo $cp_sale_config['default_marker_origin'];?>),
                       // origin: new google.maps.Point(0 , origin),
						// The anchor for this image is the base of the flagpole at 0,32.
						anchor: new google.maps.Point(<?php echo $cp_sale_config['default_marker_anchor'];?>)
					};

					var address = location[0];
					var image_url = location[8];
					var phone_1 = location[4];
					var phone_2 = location [9];
					var note = location[5];
					var product_line = location [6];
                    var labelClass = "labels store_"+store;
                    var countShops = i+1+'';

                    if(location[10]==0) {countShops = ''}

					var contentString = '<img src="' + image_url + '">';	//balloon content
                    if (note != false) {
						contentString = contentString + '<div><b>' + note + '</b></div>';
					}
					if (brand != null) {
						contentString = contentString + '<div>' + brand + '</div>';
					}
                    contentString = contentString + '<div>' + address + '</div>';

					if (product_line != null) {
						contentString = contentString + '<div>Product line: ' + product_line + '</div>';
					}
					if (phone_1 != false) {
						contentString = contentString + '<div>Phone: ' + phone_1 + '</div>';
					}
					if (phone_2 != false) {
						contentString = contentString + '<div>Phone: ' + phone_2 + '</div>';
					}
					
					var infowindow = new google.maps.InfoWindow({ //balloon options
						content: contentString,
						maxWidth: <?php echo $cp_sale_config['default_balloon_width'];?> //balloon max width set
					});

                    var marker = new MarkerWithLabel({
                        position: myLatLng,
                        optimized: false,
                        map: map,
                        labelContent: countShops,
                        icon: image,
                        title: location[0],
                        labelAnchor: new google.maps.Point(<?php echo $cp_sale_config ['default_marker_anchor']?>),
                        labelClass: labelClass // the CSS class for the label
                    });


					function infoCallback(infowindow, marker) {  //function to prevent Closures (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures#Creating_closures_in_loops.3a_A_common_mistake)
						return function () {
							infowindow.open(map, marker);
						};
					}

					infowindow.setContent(contentString); //set balloon content
					google.maps.event.addListener(marker, 'click', infoCallback(infowindow, marker)); //show balloon on click marker
                    markersOrign.push(marker);
                    //Print list shops
                    var listShops='',
                        listShopsDescription='',
                        dist_mi = location[10].toFixed(2);

                    if (note != false) {
                        listShopsDescription = listShopsDescription + '<div><b>' + note + '</b></div>';
                    }
                    if (brand != null) {
                        listShopsDescription = listShopsDescription + '<div><strong>' + brand + '</strong></div>';
                    }
                    listShopsDescription = listShopsDescription + '<div>' + address + '</div>';

                    if (product_line != null) {
                        listShopsDescription = listShopsDescription + '<div>Product line: ' + product_line + '</div>';
                    }
                    if (phone_1 != false) {
                        contentString = contentString + '<div>Phone: ' + phone_1 + '</div>';
                    }
                    if (phone_2 != false) {
                        listShopsDescription = listShopsDescription + '<div>Phone: ' + phone_2 + '</div>';
                    }

                    listShops = '<div class="row"><div class="col-md-3 col-sm-4 col-xs-4"><div class="col-md-5 col-sm-6 col-xs-12"><span class="'+labelClass+'">' + countShops +'</span></div>';
                    listShops += '<div class="col-md-7 col-sm-6 col-xs-12">'+dist_mi+' mi</div></div>';
                    listShops += '<div class="col-md-8 col-sm-8 col-xs-8">'+listShopsDescription+'</div></div>';
					listShopsResult += listShops;
					if(dist_mi!=0.00){listShopsResult += listShops;}
					if(i==lenghtLocations-1){jQuery('#list-shop').append(listShopsResult)}
				}
				var markerCluster = new MarkerClusterer(map, markersOrign,
					{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

				var paging = new pagingStores();
                paging.showPage(1);
                paging.printPagin();
			}
		}
  • Вопрос задан
  • 223 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы