Question

对于了解JavaScript的人来说可能是简单的答案，我不太了解它。我正在获取JSON数据并将标记应用于地图。然而，它为那些有空的东西产生了标记，这些标记确实让人感到困惑。所以我需要做的是根据存在的数据创建一个条件变量。我在代码中有以下内容：

let mapElement = document.getElementById('map-banner');
let pointMarkers = mapElement.getAttribute('data-location');
let marked = JSON.parse(pointMarkers);
let bounds = new google.maps.LatLngBounds();
console.log(pointMarkers);

marked.forEach(marked => {
  if (marked.lat > 0 && marked.lat !== null) {
      let lat = marked.lat;
  }
  let lng = marked.lng;

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

具体来说，我正在处理变量lat和lng。我也试过了：

let lat = marked.lat;
  if (lat > 0 && lat !== null) {
    const lat = marked.lat;
  }

在这种情况下，它会显示所有数据，并且它似乎不会应用该条件。

Answer 1

您有条件地声明变量，对于javascript是可选的。你想要的是使用一个保护子句跳过循环中的迭代：

marked.forEach(marked => {
    if (marked.lat == null)
        return;

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

Answer 2

我认为过滤器是您正在寻找的。过滤可以从您不想使用的数组中删除条目。

Docs（由MDN提供） - ＆gt; https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

此外，const / let用于在JavaScript中实现块范围。

consts用于不改变值并且（最好）不可变的变量，参见文档 - ＆gt; https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

let用于值发生变化的值，并且在不同的块范围内具有不同的值，请参阅文档 - ＆gt; https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

const mapElement = document.getElementById('map-banner');
const pointMarkers = mapElement.getAttribute('data-location');

// catch any error from JSON.parse
try {
    const coords = JSON.parse(pointMarkers);
    const bounds = new google.maps.LatLngBounds();

    // filter out incorrect coords
    const markers = coords.filter(coord => {
        return (marked.lat > 0 && marked.lat !== null)  
    });

    // create markers, extend bounds
    markers.forEach(({ lat, 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);
    });

    // fit bounds
    map.fitBounds(bounds);
} catch (error) {
    // handle error to keep users happy
}

Answer 3

也许只显示标记是否存在？：

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

如果JavaScript中存在数据，则有条件地应用变量

3 个答案: