Rails 中 Google 地图的 JSON 迭代

Question

在我的 rails 中，我有一个隐藏的输入，它应该拉入 JSON 数据以进行操作，在我的 Region > Show 页面中如下所示。

我的regions_controller 有以下显示：

def show
@region = Region.find_by!(url_name: params[:id])
@locations = @region.locations
@careers = @region.careers
@training_events = @region.training_events
respond_with @region
end

<div class="banner" id="region-banner" data-region-name="#{@region.name.downcase}">
 </div>
 <input id="points" type="hidden" data-value="#{@locations.to_json}" />

然后在我的 JS 文件中：

import { mapStyle } from './styles/mapStyle';

app.regions = () => {
  function init() {
    startGoogleMap();
   }

  let startGoogleMap = () => {
    let map = new google.maps.Map(document.getElementById('region-banner'), {
      zoom: 3,
      minZoom: 3,
      disableDefaultUI: true,
      gestureHandling: 'cooperative',
      styles: mapStyle
    });
    var mapElement = document.getElementById('region-banner');
    const regionName = mapElement.getAttribute('data-region-name');
    let dataElement = document.getElementById('points');
    let pointMarkers = mapElement.getAttribute('data-value');
    console.log(pointMarkers);
    let bounds = new google.maps.LatLngBounds();

    for (var key in pointMarkers){
      if (pointMarkers.hasOwnProperty(key)){
      var value = pointMarkers[key];
      console.log(value);
      }
    }

    map.fitBounds(bounds);
  };

  return init();
};

除了我为 pointMarkers 获得空值这一事实之外。如何迭代并添加位置？我尝试了以下方法：

for (let i=0; i < pointMarkers.length, i++) {
  pointMarkers[i]: {
    position: {(lat, lng)},
    map: map,
    icon: '/marker.png'
  }
}

没有显示错误，但我认为这是因为它仍然为 pointMarkers 拉入 null。

我什至尝试过以下方法，认为它可能更接近：

for (let i=0; i < pointMarkers.length; i++) {
  position = (pointMarkers[i].lat, pointMarkers[i].lng),
  map: map,
  icon: '/marker.png'
};

我最终得到 Error: Module build failed: SyntaxError: Unexpected token, expected ; (32:9) 用于地图：地图线。

编辑： 我还尝试了以下与上述相同的错误：

 for (let i=0; i < pointMarkers.length; i++) {
  let marker = new google.maps.Markers({
    position: (data.lat[i], data.lng[i])
  },
  map: map,
  icon: '/marker.png'
)};

另一个编辑： 也试过这个：

 for (let i = 0; i < pointMarkers.length; i++) {
  pointMarkers[i] = new google.map.Marker({
    position: { lat: data.lat[i], lng: data.lng[i] },
    map: pointMarkers[i].map,
    icon: '/marker.png'
  });
}

这样，我最终在控制台中得到以下信息：

[{"id": 2, "name": "Chicago", "lat" : "22.222", "lng": "19.19191"},{"id": 3, "name": "Detroit", "lat" : "32.232", "lng": "22.19191"}]
[
{
"
i
d

然后一切都爆发了。但它不会标记地图。

附加编辑： 提供以下代码：

 for (let i = 0; i <= pointMarkers.length; i++) {
  pointMarkers[i] = {
    position: {
      lat: parseFloat(pointMarkers.lat[i]),
      lng: parseFloat(pointMarkers.lng[i])
    },
    map: pointMarkers[i].map,
    icon: '/marker.png'
  };
}

在 lat 出现错误：parseFloat(pointMarkers.lat[i]) 显示后无法读取未定义的属性“0”：

[
{
"
i
d

等等。

更接近但不正确的编辑：

let marked = JSON.parse(pointMarkers);

function placeMarker() {
for(let i in marked){
    let lat  = marked[i].lat;
    let lng  = marked[i].lng;
    let title = marked[i].name;
    let marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat,lng),
            map: map,
            icon: '/marker.png',
            title: title
        });
     };
}; 

这实际上会给我一个对象，但实际上不会应用标记。

那么如何遍历 JSON 对象并应用 google 标记？

Answer 1

试试这个，

for (let i=0; i < pointMarkers.length, i++) {
  pointMarkers[i] = { // you were missing the assignment operator here
    position: [pointMarkers[i].lat, pointMarkers[i].lng],
    // or as lat, lon as an object,
    //position: {
    //   lat: pointMarkers[i].lat,
    //   lng: pointMarkers[i].lng,
    // }
    map: pointMarkers[i].map,
    icon: '/marker.png'
  }
}

你不能这样做

position: (data.lat[i], data.lng[i]) , meaningless

你可以做到这些

position: [data.lat[i], data.lng[i]],                     as an array
position: {"lat" : data.lat[i], "lng": data.lng[i] },     as an object

由于谷歌标记接受浮点值，您需要使用 parseFloat()，

position: {
  "lat" : parseFloat(data.lat[i]),
  "lng": parseFloat(data.lng[i])
},

Answer 2

最终使用了以下我的 js 文件：

import { tns } from 'tiny-slider/src/tiny-slider.module';
import { mapStyle } from './styles/mapStyle';

app.regions = () => {
 function init() {
   startGoogleMap();
 }

 let startGoogleMap = () => {
   let map = new google.maps.Map(document.getElementById('region-banner'), {
     zoom: 3,
     minZoom: 3,
     disableDefaultUI: true,
     gestureHandling: 'cooperative',
     styles: mapStyle
   });

   let mapElement = document.getElementById('region-banner');
   const regionName = mapElement.getAttribute('data-region-name');
   let pointMarkers = mapElement.getAttribute('data-value');
   let bounds = new google.maps.LatLngBounds();
   let marked = JSON.parse(pointMarkers);

   marked.forEach(marked => {
     let lat = parseFloat(marked.lat);
     let lng = parseFloat(marked.lng);

     const marker = new google.maps.Marker({
       position: new google.maps.LatLng(lat, lng),
       map,
       icon: '/marker.png',
       title: marked.name
     });
     bounds.extend(marker.position);
   });

   map.fitBounds(bounds);
 };

 return init();
};