时间戳

首页 > 解决方案 > 来自包含浮点数的 ruby​​ 数组的基本 JavaScript 数组

javascript - 来自包含浮点数的 ruby​​ 数组的基本 JavaScript 数组

问题描述

我正在尝试使用 Google Maps API 制作基本热图 - https://developers.google.com/maps/documentation/javascript/heatmaplayer

我有一组从我的rails控制器传递的地图坐标数组，如下所示：

@coordinates = [[51.60382, 0.02785], [51.6038, 0.02785], [51.60401, 0.02799], [51.60389, 0.02789], [51.60389, 0.02789], [51.60389, 0.02789], [51.60389, 0.02789], [51.60389, 0.02789], [51.60385, 0.02785], [51.60385, 0.02785], [51.60386, 0.02785], [51.60386, 0.02785], [51.60387, 0.02783], [51.60387, 0.02781]]

对于这些数组中的每一个，我想创建一个谷歌地图 LatLng JavaScript 对象，如下所示：

    new google.maps.LatLng(37.782551, -122.445368),

我可以通过视图获得坐标数组的数组，但是我正在努力创建一个看起来像上面那样的对象数组。

我最近的尝试：

   var coordinatesArray = <%= @coordinates %>;

      function getPoints() {
        function coordinatesArrayTwo () {
          var coordinatesArrayNew = coordinatesArray.map( c => new google.maps.LatLng(c[0], c[1]) );
          return coordinatesArrayNew;
        };

        return[coordinatesArrayTwo()]

这个想法是遍历数组数组并创建一个插入数组坐标的新对象......

但是，这似乎不起作用，我很难查看它实际返回的内容。

我觉得这是相当基本的，但有人可以帮忙吗？

谢谢

标签： javascriptarraysruby-on-railsgoogle-maps

解决方案

该解决方案借鉴了 Raphael St 和 7urkm3n 的响应...

  1. 我需要这样.to_json的红宝石数组：
 var coordinatesArray = <%= @coordinates.to_json %>;
  1. 我需要getPoints像这样调整函数：
   function getPoints() {
          var coordinatesArray = <%= @coordinates.to_json %>;
          return coordinatesArray.map( c => new google.maps.LatLng(c[0], c[1]) );
        };

这给出了以下生成热图的方法：

      let map, heatmap;

      function initMap() {
        function getPoints() {
          var coordinatesArray = <%= @coordinates.to_json %>;
          return coordinatesArray.map( c => new google.maps.LatLng(c[0], c[1]) );
        };

        map = new google.maps.Map(document.getElementById("map"), {
          zoom: 13,
          center: {
            lat: 51.603,
            lng: 0.0232
          },
          mapTypeId: "satellite"
        });
        heatmap = new google.maps.visualization.HeatmapLayer({
          data: getPoints(),
          map: map
        });
      }

      function toggleHeatmap() {
        heatmap.setMap(heatmap.getMap() ? null : map);
      }

      function changeGradient() {
        const gradient = [
          "rgba(0, 255, 255, 0)",
          "rgba(0, 255, 255, 1)",
          "rgba(0, 191, 255, 1)",
          "rgba(0, 127, 255, 1)",
          "rgba(0, 63, 255, 1)",
          "rgba(0, 0, 255, 1)",
          "rgba(0, 0, 223, 1)",
          "rgba(0, 0, 191, 1)",
          "rgba(0, 0, 159, 1)",
          "rgba(0, 0, 127, 1)",
          "rgba(63, 0, 91, 1)",
          "rgba(127, 0, 63, 1)",
          "rgba(191, 0, 31, 1)",
          "rgba(255, 0, 0, 1)"
        ];
        heatmap.set("gradient", heatmap.get("gradient") ? null : gradient);
      }

      function changeRadius() {
        heatmap.set("radius", heatmap.get("radius") ? null : 20);
      }

      function changeOpacity() {
        heatmap.set("opacity", heatmap.get("opacity") ? null : 0.2);
      } // Heatmap data: 500 Points

它有效！

谢谢大家的帮助。

推荐阅读