標記在谷歌地圖消失

Question

我有一種情況，就是有點難以解釋，何時會有近似的標題（和我在谷歌地圖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 = []; 
} 

我也試圖綁定的地圖，但我不認爲這是一個好主意（這是不工作）。有沒有一種「集成」的方式來禁用這些無限的地圖，只有一個地圖，而不是一堆時，我拖動到邊界？或者其他任何可以解決這個令人沮喪的「錯誤」的東西？
謝謝！

編輯：我會試着舉例說明發生了什麼。
這就是我想要的：我在谷歌地圖上，我得到了地圖的邊界以獲得用戶正在看的地方，並且在這個區域（由左上角和右下角劃定，已經得到）我想加載其中的每張圖片。圖片保存在我的數據庫中的GPS座標。
這裏有7張圖片我已經在我的數據庫有：

id | author | gps_lat | gps_long 
---+--------+----------+---------- 
31 | user2 | 2.82717 | 95.98167 
32 | user2 | -8.52182 | -51.46316 
33 | user2 | 44.41541 | 143.46929 
34 | user3 | 22.15819 | -77.90592 
35 | user3 | 51.28558 | 9.05738 
36 | user4 | 22.08282 | 9.06114 
37 | user5 | -9.47497 | -46.55858 

當我得從我的數據庫中的圖片，我想顯示他們在哪裏使用標記用戶。這就是爲什麼我在每個圖片的地方創建標記。但用戶只看到他看起來的標記，所以如果一張照片在巴西，而他看着歐洲，那麼數據庫的響應甚至不會包含巴西的照片。

所以最後，我應該在用戶正在尋找的區域設置標記，並且只能在這個區域設置標記。

現在發生了什麼：我已經放了一些調試代碼來查看我在地圖上的標記數組，所以我可以看到我擁有哪張圖片。我在for循環之後添加了console.log(markers.length);，該循環設置了所有標記以查看我獲得了多少標記，並將此數與我所看到的標記數進行比較。這讓我想到了有關問題的信息。 這是我所看到的在正常情況下：

一切正常，我有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; 

Answer 1

你的問題是，你的地圖的觀點跨越國際日期變更線（也稱爲反子午線），這是180度經度線。

當你接近這條線從東而來，經度去從0到-180，而當你接近這條線從西logitudes未來從0增長到180

所以，當你得到的地圖範圍包括該行你得到一個界限，看起來像（使用變量名）：

t1_long: 72 
br_long: -72 

而作爲服務器代碼期待t1_long是< br_long你得到標記數組，超出的您的地圖的真實範圍（您正在繪製位於隱藏側的標記的地圖）。

你沒有顯示你的服務器實現，但你需要考慮到這一點。因此，t1_long < br_long,時您的實施方式正常，但您需要在t1_long > br_long時添加一些條件。例如（僞）

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 

因此，查詢返回綠色標記爲-90 < -70 < 100而不是粉紅色標記。

在這種情況下，SYMMETRIC運算符不能解決問題，因爲它只允許-90和100限制順序無關。因此WHERE gps_long BETWEEN SYMMETRIC 100 AND -90和WHERE gps_long BETWEEN SYMMETRIC -90 AND 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; 
}