API карт гугла и яндекса, как подгружать много меток?
Необходимо на карту добавить много меток, так сказать обозначить разные адреса!
Адресов очень много! Есть ли возможность загрузить на яндекс в какой нибудь панели управления яндекса координаты этих точек на карте? Чтобы они отображались при перемещении по карте? Адресов много и если их все в JS добавлять то код получится неподьемный! Как сделать так чтобы загружались метки на видимую часть карты, а при перемещении по карте они подгружались автоматически? То есть посетитель смотрит определенный район города и видит адреса на карте, и если клиент переместиться по карте в другой город, там тоже должны отображаться адреса. А подгружать заранее в браузер посетителя все метки, всю карту РФ, нецелесообразно... Каждому посетителя в браузер выкидывать по 100мб JS-кода? который будет содержать тысачи программных инструкций для размещения меток на карте? |
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. И запрашивать из бд маркеры, лежащие в этой зоне и отображать их. Также полезно при большом количестве маркеров использовать кластеризацию. |
Хочу добавить маркеры выбранных станций метро (массив 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]); }); }} |
andrey3681,
не бывает элементов массива с индексом равной длине массива!!! |
Где Вы такое увидели?!
|
andrey3681,
строка 10 и строка 28 |
col_metro - количество координат в массиве, цикл будет выполнятся пока i будет меньше или равно количеству координат в массиве.
arr_metro[0] - первая пара координат разделенная запятой arr_metro[1] - вторая пара координат разделенная запятой и т.д. Как мне получить поочерёдно все элементы массива?? |
Цитата:
Цитата:
|
Убрал! Ничего не изменилось:(
|
andrey3681,
делайте макет или ссылку |
andrey3681,
хотя лучше сначала убрать все for, заменить на forEach, иначе строка 48 нерабочая |
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]) }) }) }; |
Пока писал на jsfiddle.net, нашел ошибку!
|
Добавляю маркеры метро, вокруг них окружность с определенным радиусом и если маркеры попадают в данную окружность, добавляются на карту. Нужно чтобы карта автоматически масштабировалась, чтобы было видно все добавленные на карту маркеры.
Помогите пожалуйста, нужно срочно:( 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. |