如何从 json 数组添加谷歌地图标记 - 或者如何将我的数组的参数添加到标记构造函数

Question

我一直在为此奋斗，我试图找出如何从 php 生成的对象数组中显示谷歌地图标记，我对它进行了 JSON 编码，可以在我的 js 文件中访问。具体来说，我不确定如何格式化我的数据以便谷歌地图标记参数接受它，或者如何在标记代码中定义参数。

以下是不同程序的重要部分：

PHP

$query = "SELECT LATITUDE as LAT, LONGITUDE as LNG, BUSINESSNAME as SHOP
     FROM mechanic 
     WHERE LATITUDE <> '' 
      AND LATITUDE IS NOT NULL 
    ";

if ($result = $conn -> query($query)) {
  while ($obj = $result -> fetch_object()) {
    // save the results to an object array on each iteration
    $objects[] = $obj;
  }
  $result -> free_result();
}
  
?>
  <script>var locations = <?php echo json_encode($objects); ?>

JS 中的数组

console.log(locations);
Array(3) [ {…}, {…}, {…} ]​
0: Object { LAT: "38.6152529", LNG: "-90.3559897", SHOP: "Toms Auto Care" }​
1: Object { LAT: "26.0039884", LNG: "-80.1416624", SHOP: "Sams Shop" }​
2: Object { LAT: "38.6152529", LNG: "-90.3559896", SHOP: "Mels Shop" }​
length: 3

JS 中的 GOOGLE MAP MARKER 代码示例，我在使用数组时完全迷失了：

locatons.forEach(([position, title], i) => {
      const marker = new google.maps.Marker({
        position,
        map,
        title: `${i + 1}. ${title}`,
        label: `${i + 1}`,
        optimized: false,
      });

我已经尝试了很长时间，以多种格式，我不确定是否必须将其放入对象数组中，但我终于将其组合在一起，现在我不知道如何获取标记构造函数使用 lat lng 和商店名称。

Answer 1

这应该可以解决问题：

locations.forEach((location) => {
    const marker = new google.maps.Marker({
        position: {
            lat: location.LAT,
            lng: location.LNG
        },
        map,
        title: location.SHOP,
        optimized: false,
    });
});

您可以使用 forEach 循环遍历各个位置，并获取一个位置并将该对象用作新标记。