Выводить элементы на одной карте

189
26 декабря 2017, 18:54

В данном примере все работает хорошо, но строится новая карта.
Нужно чтобы пункты выводились на одной карте, а не создавалась новая.
Вот пример кода (работает быстрее чем здесь)

Если выношу создание карты за пределы ajax, то карта не создается вовсе. Как-то так
Может это потому что строится карта динамически и нужно обрабатывать через on(change), но и так не выходит

$(document).ready(function () { 
  $('#cdek_point_id').change(function() { 
  	var pointCode = $(this).val(); 
    $.ajax({ 
        type: "GET", 
        url: 'https://integration.cdek.ru/pvzlist.php', 
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8', 
        data : { cityid : 320}, 
        dataType: "xml", 
        success: function(result) { 
          console.log('LAM', result); 
          var points = result.getElementsByTagName("Pvz"); 
          // в result находится сам xml 
          console.log(result); 
          // в points находится объект со списками пунктов  
          console.log(points); 
           
          // Тут получаем координату выбранного элемента 
          var point = result.querySelector('[Code=' + pointCode + ']'); 
          var lat = parseFloat(point.getAttribute('coordY')); 
          var lon = parseFloat(point.getAttribute('coordX')); 
          var centerPoint = [lat, lon]; 
           
          ymaps.ready(init); 
 
          function init() { 
 
            var myMap = new ymaps.Map("YMapsID", { 
            		  // Нужно здесь указать координаты выбранного пункта. 
                  // например, как-то сравнить pointCode с полученным результатом и вывести только  
                  // координаты из массива где Code == pointCode 
                  center: centerPoint,  
                  zoom: 16 
              }, { 
                  searchControlProvider: 'yandex#search' 
              }); 
 
 
            for (i=0;i<points.length;i+=1) { 
							// Здесь я уже перебираю пункты и вывожу на карту 
              var address = result.getElementsByTagName("Pvz")[i].getAttribute('FullAddress'); 
              var phone = result.getElementsByTagName("Pvz")[i].getAttribute('Phone'); 
              var workTime = result.getElementsByTagName("Pvz")[i].getAttribute('WorkTime'); 
              var info = address + '<br><b>Тел.:</b> ' + phone + '<br><b>Время.:</b> ' + workTime; 
 
              var site = result.getElementsByTagName("Pvz")[i].getAttribute('Site'); 
 
              var lat = parseFloat(result.getElementsByTagName("Pvz")[i].getAttribute('coordY')); 
              var lon = parseFloat(result.getElementsByTagName("Pvz")[i].getAttribute('coordX')); 
 
              // Создаем геообъект с типом геометрии "Точка". 
              var myGeoObject = new ymaps.GeoObject({ 
                // Описание геометрии. 
                geometry: { 
                    type: "Point", 
                    coordinates: [lat, lon] 
                }, 
                // Свойства. 
                properties: { 
                    balloonContent: info, 
                    hintContent: info 
                } 
              }, { 
                // Опции. 
                preset: 'islands#blueIcon' 
              }); 
 
              myMap.geoObjects.add(myGeoObject); 
            } 
          } 
        } 
      }); 
    }); 
});
html, body, #YMapsID { 
    height: 100%; 
} 
body { 
    margin: 0; 
} 
#YMapsID { 
    width: 100%; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script> 
<select id="cdek_point_id" > 
  <option value="0">- выберите пункт -</option> 
  <option value="LPC1">Россия, Липецкая обл., Липецк, пл. Петра Великого, 5, 05</option> 
  <option value="LPC2">Россия, Липецкая обл., Липецк, пр-т Победы, 128</option> 
</select> 
<br><br> 
<div id="YMapsID"></div>

Answer 1

Выделю скелет из вашего кода:

$(document).ready(function () {
  $('#cdek_point_id').change(function() {
    // ..
    $.ajax({
        // ...
        success: function(result) {
          ymaps.ready(init);    
          function init() {
            var myMap = new ymaps.Map("YMapsID", {
            // ...
              myMap.geoObjects.add(myGeoObject);
              // ...

Теперь как сделать чтобы работало:

$(document).ready(function () {
  ymaps.ready(init);
  function init() {
    // создаем карту одну на 
    var myMap = new ymaps.Map("YMapsID", {
    // ...
    // цепляем обработчик на select
    $('#cdek_point_id').change(function() {
      // ..
      $.ajax({
        // ...
        success: function(result) {
          // ...
            myMap.geoObjects.add(myGeoObject);
            // ...

Вообще неплохо еще бы сделать "кеширование" адресов или создать объекты заранее, а потом показывать на карте нужный и скрывать ненужные, не обращаясь постоянно за координатами.

Обновлено Более пристально посмотрел на ваш код и понял что вам вообще не нужно делать AJAX-запрос при каждом изменении селекта. Вы ведь каждый раз возвращаете сразу весь список и потом берете нужный элемент. Поэтому нужно вначале вместе с инициализацией карты (или до) запросить список, а потом уже показывать нужные точки при переключении.

READ ALSO
Формат вывода даты 01-01-2018

Формат вывода даты 01-01-2018

Есть функция, которая выводит дату через определенное кол-во дней:

215
Бегущая строка при скролле

Бегущая строка при скролле

Друзья, всем привет! как сделать вот такую бегущую строку при скролле? То есть, строка должна полностью прокрутиться до конца сайтаСмотреть...

213
Не работает jQuery на Nokia Lumia 605 [требует правки]

Не работает jQuery на Nokia Lumia 605 [требует правки]

Сделал сайт (hizhinafloristaru), решил протестировать

216