Появляется сразу три яндекс.карты через API. Как исправить?

Question

[Cyber-Pavel]

Я написал следующий код. Я брал массив с адресом и названием товара. С помощью geocode() я получал геоданные и выкладывал их на карту, но у меня вместо одной карты выходит 3. Я конечно понял, что это происходит из за того, что функция вызывается три раза в foreach.Как можно это поправить-подскажите,пожалуйста.

const arr = [{
    "address": "Ярославское шоссе, 8к1",
    "product": "васса3"
  },
  {
    "address": "Большая Очаковская",
    "product": "васса2"
  },
  {
    "address": "Большая Очаковская",
    "product": "васса2"
  }
];


arr.forEach((item) => {
  const geocode = 'Россия, Москва,' + item.address + "'";
  const product = item.product;
  getTest(geocode, product);
});

const acc = [];
async function getTest(geocode, product) {

  const response = await fetch("https://geocode-maps.yandex.ru/1.x/?format=json&apikey=c89368db-e7f4-4942-835a-1c7df2f555ce&geocode=geocode" + geocode + '"', {
    method: "GET",
    headers: {
      "Accept": "application/json"
    }
  });

  const points = await response.json();
  array = points.response.GeoObjectCollection.featureMember;

  array.forEach(item => {
    const pos = item.GeoObject.Point.pos;

    const posString = pos;
    const splitsPosition = posString.split(' ', 3);

    function swap(arr, a, b) {
      arr[a] = arr.splice(b, 1, arr[a])[0];
    }
    console.log(swap(splitsPosition, 0, 1));

    acc.unshift({
      ['address']: splitsPosition,
      ['product']: product
    });


  });


  ymaps.ready(init);

  function init() {
    var myMap = new ymaps.Map("map", {
      center: [55.852713, 37.682727],
      zoom: 16
    }, {
      searchControlProvider: 'yandex#search'
    });

    var myCollection = new ymaps.GeoObjectCollection();
    //здесь перебираю координаты
    acc.forEach((element) => {
      var myPlacemark = new ymaps.Placemark(
        element.address,

        {
          balloonContentHeader: 'Товар:',
          balloonContent: element.product
        }, {
          preset: 'islands#icon',
          iconColor: '#0000ff'
        });
      myCollection.add(myPlacemark);


    });



    myMap.geoObjects.add(myCollection);


    myMap.setBounds(myCollection.getBounds(), {
      checkZoomRange: true,
      zoomMargin: 9
    });
  }

}

Answer 1

[freeExec]

Очевидно же, что надо инициировать карту в другом месте.

Comments

[Cyber-Pavel]

Да, я понимаю, что нужно инициализировать в другом месте. Но как сделать это в моем случае? Все действия по инициализации карты у меня находятся в асихронной функции getTes, так как в ней я преобразую адрес в координаты и передаю на карту.

[freeExec]

Cyber-Pavel, ну и какая тут связь одного с другим?

[Cyber-Pavel]

freeExec, инициализацию карты я могу вызвать же только в функции getTest. В другом же месте не могу вызвать.

[freeExec]

Cyber-Pavel, Почему нет?

[Cyber-Pavel]

freeExec, Спасибо, что навели на мысль)

Answer 2

[Cyber-Pavel]

Немного подправил код и заработало)

const acc=[];
async function getTest(geocode,product) {

const response = await fetch("https://geocode-maps.yandex.ru/1.x/?format=json&ap...'"', {
method: "GET",
headers: { "Accept": "application/json" }
});

const points = await response.json();
array=points.response.GeoObjectCollection.featureMember;

array.forEach(item =>{
const pos=item.GeoObject.Point.pos;

const posString = pos;
const splitsPosition = posString.split(' ', 3);
function swap(arr, a, b) {
arr[a] = arr.splice(b, 1, arr[a])[0];
}
console.log(swap(splitsPosition,0,1));

acc.unshift({
['address']:splitsPosition,
['product']:product
});

});

return acc;
}

const formElement = document.getElementById('form');
const buttonElement=document.getElementById('button');
buttonElement.addEventListener('click', (e) => {
e.preventDefault();
console.log(document.getElementById('textarea').value);
const arStr=[];
arStr.push(document.getElementById('textarea').value);
const result = document.getElementById('textarea').value.split('\n');
const products = ["эспоо","симпл","вааса"];

var resultText = result.map(str => str.split(",").reduce(
(acc, item) => {
if (products.filter(product=> item.toLowerCase().includes(product)).length > 0 || acc.product != "") {
acc.product +=( acc.product!=""?",":"") + item;
} else {
acc.address +=( acc.address!=""?",":"") + item;
}
return acc;
}

, { address: "", product:""})
);

var accPromise=[];
resultText.forEach((item)=>{
const geocode='Россия, Москва,'+item.address+"'";
const product=item.product;
console.log(getTest(geocode,product));
accPromise=getTest(geocode,product);

});

function init(){

var myMap = new ymaps.Map("map", {
center: [55.852713,37.682727],
zoom: 16
}, {
searchControlProvider: 'yandex#search'
});

var myCollection = new ymaps.GeoObjectCollection();
//здесь перебираю координаты

accPromise.then((value) => {
value.forEach((element)=>{

var myPlacemark = new ymaps.Placemark(
element.address
,

{
balloonContentHeader: 'Товар:',
balloonContent: element.product
}, {
preset: 'islands#icon',
iconColor: '#0000ff'
});
myCollection.add(myPlacemark);


});
});

myMap.geoObjects.add(myCollection);
myMap.setBounds(myCollection.getBounds(), {
checkZoomRange: true,
zoomMargin: 9
});}

ymaps.ready(init);

});