3

React アプリケーションで Heremaps を使用して、外部 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 のループを試みましたが、何も近づいていません。オンラインで見つけた例はすべて googlemaps 用であり、heremaps で機能するようにリファクタリングできませんでした。

私が試すことができるアイデアはありますか？グループ化オプションを使用せずに?

アップデート：

Heremaps のドキュメントで DomMarker を使用した別の設定に気づいたので、これにリファクタリングしました。

    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);
    };

私の座標は配列内のオブジェクトとしてより明確になりましたが、まだエラーが発生しています。

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)

「ベストプラクティス」セクションの下に隠されているので、Heremapsは次のようなことを提案しました:

  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

4

0 に答える 0