здесь карты проходят через несколько координат и размещают маркеры - PullRequest
Новая
       63

здесь карты проходят через несколько координат и размещают маркеры

3 голосов
/ 04 августа 2020

Я пытаюсь использовать Heremaps в своем приложении React для отображения координат некоторых транспортных средств из внешнего API, но у меня возникают проблемы с размещением нескольких маркеров.

Я могу разместить маркер для отдельных координат или использовать функция группировки, но мне нужен отдельный маркер для каждой пары координат в ответе api.

Координаты из api задаются как: (lng, lat). 

0: (2) [24.7576, 59.43742]
1: (2) [24.76396, 59.43277]
2: (2) [24.73415, 59.41136]
3: (2) [24.74368, 59.41902]
4: (2) [24.76765, 59.43184]

    const myLocationIcon = new H.map.Icon(
      'https://img.icons8.com/ultraviolet/40/000000/pin3.png',
      { size: { w: 32, h: 32 } }
    );


  const locationMarker = (map) => {
      const myMarker = new H.map.Marker(
        {
          lat: realLat,
          lng: realLong,
        },
        {
          icon: myLocationIcon,
        }
      );
      map.addObject(myMarker);
    };

      locationMarker(hMap);

Это даст мне маркер для набора координат, но я не понимаю, как перебирать значения массива, чтобы поставить несколько.

Я пробовал цикл forEach и Map, но ничего не получается подходя близко, и все примеры, которые я нахожу в Интернете, относятся к картам Google, и я не смог провести рефакторинг, чтобы заставить его работать с картами здесь.

Есть ли у кого-нибудь идеи, что я могу попробовать? без использования их параметра группировки?

ОБНОВЛЕНИЕ:

Заметил еще одну настройку с DomMarker в документации Heremaps, поэтому мы изменили его: 

    const myLocationMarker = async (map) => {
      const tltVehicles = await gpsData.map(
        (vehicle) => vehicle.geometry.coordinates
      );

      const tltCoords = tltVehicles.map(([lng, lat]) => ({ lng, lat }));
      console.log('tltCoords', tltCoords);

      const getLng = tltCoords.map((longitude) => longitude.lng);
      const getLat = tltCoords.map((latitude) => latitude.lat);
      // console.log('test', test);

      const busIconUrl =
        '<svg width="24" height="24" ' +
        'xmlns="http://www.w3.org/2000/svg">' +
        '<rect stroke="white" fill="#1b468d" x="1" y="1" width="22" ' +
        'height="22" /><text x="12" y="18" font-size="12pt" ' +
        'font-family="Arial" font-weight="bold" text-anchor="middle" ' +
        'fill="white">H</text></svg>';
      const icon = new H.map.DomIcon(busIconUrl);
      const coords = {
        lng: getLng,
        lat: getLat,
      };
      const marker = new H.map.DomMarker(coords, { icon });
      map.setZoom(12);
      map.addObject(marker);
    };

Мои координаты теперь более четкие, поскольку ob js в массиве, но я все еще получаю ошибки. 

0: {lng: 24.75396, lat: 59.43905}
1: {lng: 24.74562, lat: 59.41914}
2: {lng: 24.74326, lat: 59.42896}
3: {lng: 24.74463, lat: 59.41889}
4: {lng: 24.74474, lat: 59.41937}
5: {lng: 24.76047, lat: 59.43488}
6: {lng: 24.79472, lat: 59.42708}

Ошибка в консоли: 

Uncaught (in promise) InvalidArgumentError: H.map.AbstractMarker#setGeometry (Argument #0 [object Object])
    at new D (https://js.api.here.com/v3/3.1/mapsjs-core.js:43:977)
    at Xf (https://js.api.here.com/v3/3.1/mapsjs-core.js:89:407)
    at ei.bi.ba (https://js.api.here.com/v3/3.1/mapsjs-core.js:177:548)
    at ei.bi [as constructor] (https://js.api.here.com/v3/3.1/mapsjs-core.js:177:309)
    at new ei (https://js.api.here.com/v3/3.1/mapsjs-core.js:180:387)
    at myLocationMarker (http://localhost:3000/static/js/12.chunk.js:491:22)

Так что скрыто в разделе «Лучшие практики». Здесь карты предлагают что-то вроде это: 

  const tltLocationMarkers = async (map) => {
      const tltVehicles = await gpsData.map(
        (vehicle) => vehicle.geometry.coordinates
      );

      const busIconUrl =
        '<svg width="24" height="24" ' +
        'xmlns="http://www.w3.org/2000/svg">' +
        '<rect stroke="white" fill="#1b468d" x="1" y="1" width="22" ' +
        'height="22" /><text x="12" y="18" font-size="12pt" ' +
        'font-family="Arial" font-weight="bold" text-anchor="middle" ' +
        'fill="white">H</text></svg>';

      const points = tltVehicles.map(([lng, lat]) => ({ lng, lat }));
      const markers = [];
      // Create single Icon instance
      const icon = new H.map.Icon(busIconUrl);

      console.log('points', points);
      console.log('markers', markers);

      for (let i = 0; i < points.length; i++) {
        markers.push(
          new H.map.Marker(points[i], {
            // Reuse the Icon instance:
            icon,
          })
        );
      }

      // const marker = new H.map.DomMarker(coords, { icon });
      map.setZoom(12);
      map.addObject(markers);
    };

Карта теперь загружается, но без маркеров и этой ошибки в консоли: 

Uncaught (in promise) InvalidArgumentError: H.Map#addObject (Argument #0 [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object

Как показано здесь: https://developer.here.com/documentation/maps/3.1.17.0/dev_guide/topics/best-practices.html

...