javascript - 为 Google MAPS API v3 放置来自 JSON 数据的标记

Question

我有一个 MySQL 数据库，我已经创建了一个 PHP 脚本来将该数据提取为 JSON 格式。我知道需要获取该 JSON 输出并在 Google map 上创建标记。看起来很简单，但我只需要标记来显示 JSON 输出中的值之一是否返回 true。我将概述标记应如何显示。

JSON 输出

gpsStatus": "true", = Show streamOffline.png icon/marker

If gpsStatus & "streamStatus": "true", Then show the streamOnine.png icon/marker

If gpsStatus": "false" the show or remove from map the streamOffline.png icon/marker

所以基本上唯一应该显示图标/制造商的时间是 if gpsStatus": "true"但取决于 streamStatus 的状态决定它是否显示 streamOffline.png 图标/标记或 streamOnline.png 图标/marker.gpsStatus":无论 streamStatus 值如何，“false”都会删除或不显示标记。

另一个转折点是，我试图根据来自 JSON 输出的 lat/lng 值的数据，在不重新加载 map 的情况下更新/刷新标记。如果我还试图从 JSON 输出中提取其他值，那么我可以将数据放入 infowidows 等。

几个月来，我一直在 Stack、Google 搜索和 YouTube 上搜索如何执行此操作，并尝试了不同的方法(太多的东西无法在此处列出和发布)但是，大多数示例 ether 不适用于我或已经过时了，我无法满足自己的需求。当涉及到 JavaScript 和 Google map 时，我很糟糕。

那么有没有人可以根据我的情况给我一个示例，说明如何获取该 JSON 数据并循环遍历它以根据某些对象的值在 map 上绘制动态标记并刷新/更新当 lat/lng 值发生变化时它们会显示它们，然后当“gpsStatus”显示为 false 时删除标记以及知道在其他区域使用什么键？

这是我的 JSON 输出。

http://stream.dfwstormforce.com/test/api.php

这是我的带有静态标记的测试 map ，以及我尝试完成的填充数据应该是什么样子。

http://stream.dfwstormforce.com/test/test.html

Answer 1

我已尝试根据我从上述描述中理解的内容更改代码，您现在可以扩展它。

            var customIcons = {
                  offline: {
                    icon: 'http://stream.dfwstormforce.com/images/icons/gpsOffline.png'
                  },
                  online: {
                    icon: 'http://stream.dfwstormforce.com/images/icons/gpsOnline.png'
                  }
                };

            var getCustomIcons= function (streamdata){
                    var iconUrl=customIcons.online;
                      if(streamdata.gpsStatus=='false')
                      {
                        iconUrl=customIcons.offline.icon;
                      }else
                      {
                        iconUrl=customIcons.online.icon;
                      }
                      return iconUrl;
                }


               $.getJSON('http://stream.dfwstormforce.com/inc/api.php', function(responsedata) { 
                        $.each( responsedata.streamers, function(i, value) {
                             if(value.lat!="" && value.lng!="" )
                             {
                                  var marker = new google.maps.Marker({
                                      position: {lat: parseFloat(value.lat), lng: parseFloat(value.lng)},
                                      animation: google.maps.Animation.DROP,
                                      title: value.DisplayName+','+ value.ChaserLocation,
                                      icon: getCustomIcons(value),
                                      map: map
                                    });

                                  marker.addListener('click', function() {
                                          infowindow.open(map, marker);
                                        });
                            }
                         });
            });