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

我的坐标现在作为数组中的 objs 更清晰，但我仍然遇到错误。

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