Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   API карт гугла и яндекса, как подгружать много меток? (https://javascript.ru/forum/misc/64505-api-kart-gugla-i-yandeksa-kak-podgruzhat-mnogo-metok.html)

SuperBenza 16.08.2016 13:25

API карт гугла и яндекса, как подгружать много меток?
 
Необходимо на карту добавить много меток, так сказать обозначить разные адреса!
Адресов очень много! Есть ли возможность загрузить на яндекс в какой нибудь панели управления яндекса координаты этих точек на карте? Чтобы они отображались при перемещении по карте?

Адресов много и если их все в JS добавлять то код получится неподьемный!

Как сделать так чтобы загружались метки на видимую часть карты, а при перемещении по карте они подгружались автоматически? То есть посетитель смотрит определенный район города и видит адреса на карте, и если клиент переместиться по карте в другой город, там тоже должны отображаться адреса. А подгружать заранее в браузер посетителя все метки, всю карту РФ, нецелесообразно... Каждому посетителя в браузер выкидывать по 100мб JS-кода? который будет содержать тысачи программных инструкций для размещения меток на карте?

Dilettante_Pro 16.08.2016 16:58

SuperBenza,
Для Google Maps Api по событию bounds_changed использовать метод
getBounds()
Return Value: LatLngBounds
Returns the lat/lng bounds of the current viewport. If more than one copy of the world is visible, the bounds range in longitude from -180 to 180 degrees inclusive. If the map is not yet initialized (i.e. the mapType is still null), or center and zoom have not been set then the result is null or undefined.
LatLngBounds(sw?:LatLng|LatLngLiteral, ne?:LatLng|LatLngLiteral) Constructs a rectangle from the points at its south-west and north-east corners.
И запрашивать из бд маркеры, лежащие в этой зоне и отображать их.
Также полезно при большом количестве маркеров использовать кластеризацию.

andrey3681 05.10.2016 12:03

Хочу добавить маркеры выбранных станций метро (массив arr_metro) и маркеры квартир (массив array_coordinates), если первыми добавлять маркеры метро то маркеры квартир не добавляются и наоборот:( В чем проблема?

function initMap(array_coordinates, array_marker_info, arr_metro) {
var map;
map = new google.maps.Map(document.getElementById('map_canvas2'), {
    center: {lat: 55.7522200, lng: 37.6155600},
    zoom: 12,
    scrollwheel: false
});
var metro = [];
var col_metro = arr_metro.length;
for(var i = 0; i <= col_metro; i++) {
    var ll = arr_metro[i].split(',');
    var lng = ll[1];
    if(lng.search(';') != -1) {
        lng = lng.replace(';', '');
    }
    var coordinates_metro = new google.maps.LatLng(ll[0], lng);
        metro[i] = new google.maps.Marker({
        position:coordinates_metro,
        map: map,
        title: "Метро",
        visible: true,
        icon: 'images/metro_flag.png'
    });
}
var markers = [];
var infowindow = [];
var col = array_coordinates.length;
for (var i = 0; i <= col; i++) {
    infowindow[i] = new google.maps.InfoWindow({ 
        content: array_marker_info[i]
    });
    var ll = array_coordinates[i].split(',');
    var latlng = new google.maps.LatLng(ll[0], ll[1]);
        markers[i] = new google.maps.Marker({
        position:latlng,
        map: map,
        title: array_coordinates[i],
        animation: google.maps.Animation.DROP,
        visible: true,
        icon: 'images/beachflag.png'
    });
    setInfoWindowHandlers(i);
}

function setInfoWindowHandlers(i) {
    markers[i].addListener('click', function() {
        console.log(i);
        infowindow[i].open(map, markers[i]);
    });
}}

рони 05.10.2016 12:16

andrey3681,
не бывает элементов массива с индексом равной длине массива!!!

andrey3681 05.10.2016 13:50

Где Вы такое увидели?!

рони 05.10.2016 14:35

andrey3681,
строка 10 и строка 28

andrey3681 05.10.2016 15:15

col_metro - количество координат в массиве, цикл будет выполнятся пока i будет меньше или равно количеству координат в массиве.

arr_metro[0] - первая пара координат разделенная запятой
arr_metro[1] - вторая пара координат разделенная запятой и т.д.

Как мне получить поочерёдно все элементы массива??

рони 05.10.2016 15:47

Цитата:

Сообщение от andrey3681
или равно количеству координат в массиве.

Цитата:

Сообщение от рони
не бывает элементов массива с индексом равной длине массива!!!

исправьте указанные строки, уберите =

andrey3681 05.10.2016 16:00

Убрал! Ничего не изменилось:(

рони 05.10.2016 16:08

andrey3681,
делайте макет или ссылку

рони 05.10.2016 16:11

andrey3681,
хотя лучше сначала убрать все for, заменить на forEach, иначе строка 48 нерабочая

рони 05.10.2016 16:41

andrey3681,
function initMap(array_coordinates, array_marker_info, arr_metro) {
    var map;
    map = new google.maps.Map(document.getElementById("map_canvas2"), {
        center: {
            lat: 55.75222,
            lng: 37.61556
        },
        zoom: 12,
        scrollwheel: false
    });
    var metro = [];
    arr_metro.forEach(function(el, i) {
        var ll = el.split(",");
        var lng = ll[1];
        if (lng.search(";") != -1) lng = lng.replace(";", "");
        var coordinates_metro = new google.maps.LatLng(ll[0], lng);
        metro[i] = new google.maps.Marker({
            position: coordinates_metro,
            map: map,
            title: "\u041c\u0435\u0442\u0440\u043e",
            visible: true,
            icon: "images/metro_flag.png"
        })
    });
    var markers = [];
    var infowindow = [];
    array_coordinates.forEach(function(el, i) {
        infowindow[i] = new google.maps.InfoWindow({
            content: array_marker_info[i]
        });
        var ll = el.split(",");
        var latlng = new google.maps.LatLng(ll[0], ll[1]);
        markers[i] = new google.maps.Marker({
            position: latlng,
            map: map,
            title: el,
            animation: google.maps.Animation.DROP,
            visible: true,
            icon: "images/beachflag.png"
        });
        markers[i].addListener("click", function() {
            console.log(i);
            infowindow[i].open(map, markers[i])
        })
    })
};

andrey3681 05.10.2016 17:08

Пока писал на jsfiddle.net, нашел ошибку!

andrey3681 13.12.2016 22:10

Добавляю маркеры метро, вокруг них окружность с определенным радиусом и если маркеры попадают в данную окружность, добавляются на карту. Нужно чтобы карта автоматически масштабировалась, чтобы было видно все добавленные на карту маркеры.
Помогите пожалуйста, нужно срочно:(

function initMap(array_coordinates, array_marker_info, arr_metro, metro_name, radius, array_marker_crossing) {
	var map;
	var radius_select_metro = radius;
		radius_select_metro = Number(radius_select_metro);
	map = new google.maps.Map(document.getElementById('map_canvas2'), {
		center: {lat: 55.7522200, lng: 37.6155600},
		zoom: 12,
		scrollwheel: false
	});
//Маркеры квартир	
	var markers = [];
	var infowindow = [];
	var col = array_coordinates.length;
	for (var i = 0; i < col; i++) {
		infowindow[i] = new google.maps.InfoWindow({ 
			content: array_marker_info[i]
		});
		var crossing = array_marker_crossing[i];
		if(crossing === "yes") {
			icon_appartment = 'images/beachflag2.png';
		}
		else {
			icon_appartment = 'images/beachflag.png';
		}
		var ll = array_coordinates[i].split(',');
		var latlng = new google.maps.LatLng(ll[0], ll[1]);
			markers[i] = new google.maps.Marker({
			position:latlng,
			map: map,
			title: array_coordinates[i],
			animation: google.maps.Animation.DROP,
			visible: true,
			icon: icon_appartment,
		});
		setInfoWindowHandlers(i);
		
	} 
	function setInfoWindowHandlers(i) {
		markers[i].addListener('click', function() {
			console.log(i);
			infowindow[i].open(map, markers[i]);
		});
	}
//Маркеры метро	
	var metro = [];
	var col_metro = arr_metro.length;
	for(var i = 0; i < col_metro; i++) {
		var ll = arr_metro[i].split(',');
		var lng = ll[1];
		if(lng.search(';') != -1) {
			lng = lng.replace(';', '');
		}
		var coordinates_metro = new google.maps.LatLng(ll[0], lng);
			metro[i] = new google.maps.Marker({
			position:coordinates_metro,
			map: map,
			title: metro_name[i],
			visible: true,
			icon: 'images/metro_flag.png'
		});
		
		var Circle = new google.maps.Circle({
		  strokeColor: '#FFA4A6',
		  strokeOpacity: 0.8,
		  strokeWeight: 2,
		  fillColor: '#B4B4B4',
		  fillOpacity: 0.35,
		  map: map,
		  center: coordinates_metro,
		  radius: radius_select_metro
		});
	}
}


Часовой пояс GMT +3, время: 15:49.