从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

因此,基本上唯一一次应该显示图标/制造商的是gpsStatus":"true"但是取决于streamStatus的状态确定它是否显示streamOffline.png图标/标记或streamOnline.png图标/ marker.gpsStatus":"false "无论streamStatus值如何,都会删除或不显示标记.

另一个转折是我试图让标记更新/刷新,而不是根据来自JSON输出的lat/lng值的数据重新加载地图.如果我还试图从JSON输出中提取其他值,那么我可以将数据放入infowidows等.

我一直在搜索有关如何在Stack,Google搜索和YouTube上执行此操作以及尝试不同的事情(在此处列出和发布的内容太多)的几个月,但是,大多数示例以太不适用于我或已过时我不能满足我的需求.在JavaScript和谷歌地图方面,我很恐怖.

那么有没有人可以根据我的情况给出一个例子,根据我的情况如何获取JSON数据并循环通过它在地图上根据某些对象的值绘制动态标记,并在当时刷新/更新它们当"gpsStatus"显示为false并且知道要在其他区域使用哪些键时,lat/lng值会更改然后删除标记？

这是我的JSON输出.

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

这是我的测试图,带有静态标记,以及我想要完成的填充数据应该是什么样子.

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