Javascript 谷歌地图中消失的标记

我有一个有点难以解释的情况，大概的标题是从哪里来的（我对谷歌地图API完全陌生）

我在谷歌地图上用javascript API（v3）创建了一些标记，并用来自我自己API的gps坐标对它们进行了定位。问题是当我到达地图的左边界（或者你想要的右边界）时，那些标记就消失了。我不是指我设定的一些自定义边界，我是指世界的边界。当我走得更远时，它们又回来了。当我越过其中一条线时，它们消失了，如图所示：

我的标记来自地图的中心（欧洲），就像当我穿过其中一条线时，比如说从左边稍微看一点，脚本开始在左边的地图上加载标记，我没有看到，因为我放大了，我仍然在右边的地图上

对不起，很难解释。以下是我的完整脚本：

var map;
var markers = []; // this will hold all the markers on the map
// google maps API callback, we init the map
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 30, lng: 10.3}, // FIXME
    zoom: 2, // default zoom
    styles: map_style, // dark style
    disableDefaultUI: false, // FIXME
    minZoom: 3, // the maximum zoom-out
    maxZoom: 15, // the maximum zoom-in: we can't set this to higher values because the pictures would be
                 // at their exact locations, if somebody takes a picture in his home, this would show the
                 // exact location of his home
  });

  // first time idle (when map is loaded) XXX: think about this design, can do better
  google.maps.event.addListenerOnce(map, 'idle', function(){
    // we get the gps coords of the current view's bounds
    var view_bounds = map.getBounds();
    var NE = view_bounds.getNorthEast();
    var SW = view_bounds.getSouthWest();

    // we need NW and SE but the API only gives us NE and SW, so a little bit of conversion...
    var NW = new google.maps.LatLng(NE.lat(), SW.lng());
    var SE = new google.maps.LatLng(SW.lat(), NE.lng());

    var tl_lat = NW.lat();
    var tl_long = NW.lng();
    var br_lat = SE.lat();
    var br_long = SE.lng();

    // get the newest pictures in those bounds
    get_newest_pictures(tl_lat, tl_long, br_lat, br_long);
  });

  // when the user stops dragging, check for pictures in the view bounds
  google.maps.event.addListener(map, 'dragend', function(e){
    // clear all markers
    deleteMarkers();

    // we get the gps coords of the current view's bounds
    // need North West lat & long, and South East lat & long
    var view_bounds = map.getBounds();
    var NE = view_bounds.getNorthEast();
    var SW = view_bounds.getSouthWest();

    // we need NW and SE but the API only gives us NE and SW, so a little bit of conversion...
    var NW = new google.maps.LatLng(NE.lat(), SW.lng());
    var SE = new google.maps.LatLng(SW.lat(), NE.lng());

    var tl_lat = NW.lat();
    var tl_long = NW.lng();
    var br_lat = SE.lat();
    var br_long = SE.lng();

    // get the newest pictures in those bounds
    get_newest_pictures(tl_lat, tl_long, br_lat, br_long);
  });
}

// get the newest pictures in an area (in bounds)
function get_newest_pictures(tl_lat, tl_long, br_lat, br_long) {

  var pictures;

  $.ajax({
    url: "http://127.0.0.1:6767/pictures/newest?tl_lat="+tl_lat
                                                        +"&tl_long="+tl_long
                                                        +"&br_lat="+br_lat
                                                        +"&br_long="+br_long,
    success: function(pictures) {
      // parse the return data in JSON
      pictures = JSON.parse(pictures);

      // for each pictures, create a marker at the location
      for (i = 0; i < pictures.length; i++) {
        var coords = new google.maps.LatLng(pictures[i]["gps_lat"], pictures[i]["gps_long"]);
        var marker = new google.maps.Marker({
          position: coords,
          title: "Hello World!",
          icon: "img/pin_newest.png"
        });
        marker["author"] = pictures[i]["author"];
        // push the marker in the markers array
        markers.push(marker);

        // set the marker
        marker.setMap(map);
      }

      console.log(markers);
    },
    error: function(XHR, textStatus, errorThrown) {
      console.log(textStatus);
      console.log(errorThrown);
    },
  });
}

// delete all the markers
function deleteMarkers() {
  for(i = 0; i < markers.length; i++){
    markers[i].setMap(null);
  }
  // empty the markers array
  markers = [];
}

当我从数据库中获取图片时，我希望使用标记向用户显示它们的位置。这就是为什么我要在图片所在的位置为每张图片创建一个标记。但是用户只在他看的地方看到标记，因此如果一张图片是在巴西，而他看的是欧洲，那么来自数据库的响应甚至不会包含巴西的图片

因此，在最后，我应该在用户正在查看的区域设置标记，并且只在该区域设置标记

现在就是这样了：我放了一些调试代码来查看地图上的标记数组，这样我就可以看到我的图片了。我添加了

console.log（markers.length）在我的for循环之后，设置所有标记以查看我有多少标记，并将此数字与我看到的标记数进行比较。这给了我关于问题所在的信息。
以下是我在正常情况下看到的情况：


一切正常，我在这个区域有4张图片，所以脚本显示了4个标记。控制台打印
console.log（markers.length）的
4

现在是另一个正常情况，但当它出现错误时只是“旁边”：


控制台打印
2
，所以一切正常。

但是，当我走到左边几公里的地方，当我离开地图的“边界”到另一张地图上时，我得到的是：


没什么，正如你所看到的。控制台将打印
4
。我们看到地图上的边界线，因为主题的关系，它有点暗。我看到当我越过边界线时，它开始窃听。就像它试图在左边的地图上加载标记，但我仍然在右边的地图上，所以我看不到它们

编辑：以下是服务器端SQL查询：

SELECT * FROM pictures
WHERE gps_long BETWEEN SYMMETRIC <tl_long> AND <br_long>
AND gps_lat BETWEEN SYMMETRIC <tl_lat> AND <br_lat>
ORDER BY date_taken DESC LIMIT 50;

从图片中选择*
其中gps_在对称和
和gps_lat在对称和
按日期订购，说明限额50；
您的问题是，您的地图视图正在越过国际日期线（也称为反子午线），即180度经线

当你从东面接近这条线时，经度从0到-180，当你从西面接近这条线时，经度从0到180

因此，当您获得包含这一行的贴图边界时，您将获得一个如下所示的边界（使用变量名）：

当服务器代码期望
t1_long
为
br_long
时，您将获得一组超出地图真实边界的标记（您正在绘制地图隐藏侧的标记）

您没有显示您的服务器实现，但需要考虑到这一点。因此，当
t1\u long
时，您的实现是正常的，但是当
t1\u long>br\u long
时，您需要添加一些条件。例如（伪代码）

因此，查询将绿色标记返回为-90<-70<100，而不是粉红色标记

在这种情况下，
对称
运算符不能解决问题，因为它只允许-90和100限制顺序不相关。因此，对于绿色标记，
其中gps长度在对称的100和-90之间，以及
其中gps长度在对称的-90和100之间，这两种情况都是正确的，而对于粉色标记，这两种情况都是错误的

更新：

if (t1_long > br_long) {
    SELECT * FROM pictures
    WHERE (gps_long BETWEEN SYMMETRIC <tl_long> AND 180 OR gps_long BETWEEN SYMMETRIC <br_long> AND -180)
    AND gps_lat BETWEEN SYMMETRIC <tl_lat> AND <br_lat>
    ORDER BY date_taken DESC LIMIT 50;
} else {
    SELECT * FROM pictures
    WHERE gps_long BETWEEN SYMMETRIC <tl_long> AND <br_long>
    AND gps_lat BETWEEN SYMMETRIC <tl_lat> AND <br_lat>
    ORDER BY date_taken DESC LIMIT 50;
}

if（t1_long>br_long）{
从图片中选择*
式中（gps_长在对称和180之间或gps_长在对称和-180之间）
和gps_lat在对称和
按日期订购，说明限额50；
}否则{
从图片中选择*
其中gps_在对称和
和gps_lat在对称和
按日期订购，说明限额50；
}
请提供一个（有足够的示例数据来演示该问题）我编辑的线程，希望这能提供更多信息。try var rectangle=new google.maps.rectangle（{map:map，bounds:view\u bounds}）；绘制要获取图片的实际边界，并将其与db查询进行比较。另外，使用console.log查看事件的顺序是否没有把事情搞砸。$。ajax是异步的（）。正如geocozip所说，请创建一个最小的工作示例。简单地用在这些点上添加标记来替换get_New_pictures谢谢你的回答，问题确实是当tl_long>br_long时，但我不知道如何处理这种情况以保持标记显示。我还编辑了线程以显示我的服务器端SQL查询。我已经更新了答案。希望这有助于澄清问题谢谢你的澄清我现在明白了问题所在。我无法“获取”粉色标记，因为我的SQL条件中没有一个包含他的经度。。。但是，我很抱歉这么坚持，你知道如何解决这个问题吗？这就像我必须重写整个SQL查询，但我不知道如何。。。或者，很明显需要修复，但我看不到。别担心，很乐意帮忙！：）我在伪代码中添加了一个示例（未测试）。我希望如此
t1_long: 72
br_long: -72

if (t1_long > br_long) {
    longitude_condition = " longitude > " + t1_long " and longitude < 180 or longitude < " + br_long + " and longitude > -180 ";
}

WHERE gps_long BETWEEN SYMMETRIC 100 AND -90

if (t1_long > br_long) {
    SELECT * FROM pictures
    WHERE (gps_long BETWEEN SYMMETRIC <tl_long> AND 180 OR gps_long BETWEEN SYMMETRIC <br_long> AND -180)
    AND gps_lat BETWEEN SYMMETRIC <tl_lat> AND <br_lat>
    ORDER BY date_taken DESC LIMIT 50;
} else {
    SELECT * FROM pictures
    WHERE gps_long BETWEEN SYMMETRIC <tl_long> AND <br_long>
    AND gps_lat BETWEEN SYMMETRIC <tl_lat> AND <br_lat>
    ORDER BY date_taken DESC LIMIT 50;
}