我一直在努力解决这个问题,我试图找出如何显示一个用php生成的对象数组的谷歌 map 标记,我有JSON编码,可以在我的js文件中访问. 具体地说,我不确定如何格式化我的数据以便google maps标记参数接受它,或者如何在标记代码中定义参数.

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

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

ARRAY IN 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

GOOGLE MAP MARKER code sample in js that I am completely lost on getting to use the array:

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

我已经try 了很长一段时间,在许多格式中,我不确定是否必须将它变成对象数组,但我最终把它放在一起,现在我不知道如何让marks构造函数使用lat_name和shop_name.

推荐答案

您的PHP很好,json_encode是正确的方式,但是JavaScript需要做一个小的修改.

这应该能起到作用:

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

使用forEach循环遍历各个位置,得到一个位置,并将该对象用于新标记.

Javascript相关问答推荐

禁用从vue.js 2中的循环创建的表的最后td的按钮

Next.js Next/Image图像隐含性有任何类型-如何修复?

node TS:JWT令牌签名以验证客户端和后台问题之间的身份验证

在Angular中将样式应用于innerHTML

在这种情况下,如何 for each 元素添加id?

如何为我的astro页面中的相同组件自动创建不同的内容?

配置WebAssembly/Emscripten本地生成问题

如何在bslib nav_insert之后更改导航标签的CSS类和样式?

还原器未正确更新状态

无法使用单击按钮时的useState将数据从一个页面传递到另一个页面

IF语句的计算结果与实际情况相反

确保函数签名中的类型安全:匹配值

同一类的所有div';S的模式窗口

将数组扩展到对象中

如何在我的Next.js项目中.blob()我的图像文件?

try 使用PM2在AWS ubuntu服务器上运行 node 进程时出错

如何防止ionic 输入中的特殊字符.?

使用RxJS from Event和@ViewChild vs KeyUp事件和RxJS主题更改输入字段值

Chart.js Hover线条在鼠标离开时不会消失

我们是否可以在reactjs中创建多个同名的路由