谷歌地圖API KML地標沒有映射到正確的座標

Question

我想使用KmlLayer將地標添加到我的地圖，但座標映射不正確。我已經知道座標是長的，緯度順序，問題是座標看起來像是比地圖更加縮小，但是相對於彼此，它們看起來是正確放置的，最終結果是所有我的地標位於地圖中間的一個集羣中，而不是像他們應該分佈在整個地圖上一樣。我以前曾嘗試手動創建google.maps.Marker（）對象，並且在執行此操作時座標是正確的，因此我確定該座標是正確的。

我試着設置一個JSFiddle來演示，但我似乎無法得到它的工作，所以我只是link you to the live page.在該頁面上，地圖在完全縮小時，以座標（+/-64，+/- 64），因爲使用這些邊界使標記放置更容易，顯然，我不關心正確映射到任何現實世界座標。作爲參考，最西南心臟標誌被指定爲座標（-59.75，-56.75），所以它應該接近地圖的角落（在海灣最西南的船的甲板上）精確）。當我用這些確切的座標創建一個google.maps.Marker（）對象時，它恰好在我想要的位置。那麼，任何人都可以幫助我理解爲什麼KmlLayer座標不能正確映射？

Here is the full KML file

Answer 1

KML使用WGS84經緯度座標。您正在使用不使用這些座標的custom map projection。

當您使用Maps API創建標記時，它會經歷自定義投影，但我不認爲KML圖層會這樣做。

大概這個KML文件是你自己在你的服務器上生成的東西，或者是一些腳本？然後，您可以在生成KML時根據需要投影座標，以匹配Maps API代碼中使用的投影。

如果這不方便或不可行，那麼是否有必要使用KML層？由於它可以使用Maps API Marker對象，因此它可能會正常運行。

這是related question。

繼續我們在評論中的對話，我認爲最好的方法是使用JSON來存儲標記數據。 JSON並沒有強制要求太多的結構;它具有像JavaScript一樣的對象和數組，並且可以以任何對您有用的方式將它們組合在一起。這裏是一個什麼樣的XML文件可能看起來像JSON一個版本：

{ 
    "groups": [ 
     { 
      "type": "heartPiece", 
      "icon": "heartpiece.png", 
      "markers": [ 
       { 
         "id": "p1", 
         "name": "Heart Piece #1", 
         "lat": -11.5, 
         "lng": 3.5 
       }, 
       { 
         "id": "p2", 
         "name": "Heart Piece #2", 
         "lat": 5.75, 
         "lng": 58 
       }, 
       { 
         "id": "p3", 
         "name": "Heart Piece #3", 
         "lat": 28.25, 
         "lng": 60.75 
       }, 
       { 
         "id": "p4", 
         "name": "Heart Piece #4", 
         "lat": -58.75, 
         "lng": -16.25 
       }, 
       { 
         "id": "p5", 
         "name": "Heart Piece #5", 
         "lat": -35, 
         "lng": -14 
       }, 
       { 
         "id": "p6", 
         "name": "Heart Piece #6", 
         "lat": -11.25, 
         "lng": -30.25 
       }, 
       { 
         "id": "p7", 
         "name": "Heart Piece #7", 
         "lat": -40, 
         "lng": -9.5 
       }, 
       { 
         "id": "p8", 
         "name": "Heart Piece #8", 
         "lat": -5.75, 
         "lng": 9.75 
       }, 
       { 
         "id": "p9", 
         "name": "Heart Piece #9", 
         "lat": -5, 
         "lng": 0.5 
       }, 
       { 
         "id": "p10", 
         "name": "Heart Piece #10", 
         "lat": 2.75, 
         "lng": -10.25 
       }, 
       { 
         "id": "p11", 
         "name": "Heart Piece #11", 
         "lat": 28.75, 
         "lng": 19.75 
       }, 
       { 
         "id": "p12", 
         "name": "Heart Piece #12", 
         "lat": -54.75, 
         "lng": 45.75 
       }, 
       { 
         "id": "p13", 
         "name": "Heart Piece #13", 
         "lat": -39.75, 
         "lng": 5.25 
       }, 
       { 
         "id": "p14", 
         "name": "Heart Piece #14", 
         "lat": -56.75, 
         "lng": -59.75 
       }, 
       { 
         "id": "p15", 
         "name": "Heart Piece #15", 
         "lat": -60.25, 
         "lng": 23 
       }, 
       { 
         "id": "p16", 
         "name": "Heart Piece #16", 
         "lat": 64, 
         "lng": 0 
       }, 
       { 
         "id": "p17", 
         "name": "Heart Piece #17", 
         "lat": -52.25, 
         "lng": 60.75 
       }, 
       { 
         "id": "p18", 
         "name": "Heart Piece #18", 
         "lat": 48.25, 
         "lng": 31.25 
       }, 
       { 
         "id": "p19", 
         "name": "Heart Piece #19", 
         "lat": 60.5, 
         "lng": 20.5 
       }, 
       { 
         "id": "p20", 
         "name": "Heart Piece #20", 
         "lat": 22.75, 
         "lng": 24.5 
       }, 
       { 
         "id": "p21", 
         "name": "Heart Piece #21", 
         "lat": 61.25, 
         "lng": 10.75 
       }, 
       { 
         "id": "p22", 
         "name": "Heart Piece #22", 
         "lat": 40, 
         "lng": 56.5 
       }, 
       { 
         "id": "p23", 
         "name": "Heart Piece #23", 
         "lat": -14.25, 
         "lng": 32.25 
       }, 
       { 
         "id": "p24", 
         "name": "Heart Piece #24", 
         "lat": 29.75, 
         "lng": -61.25 
       }, 
       { 
         "id": "p25", 
         "name": "Heart Piece #25", 
         "lat": 60.25, 
         "lng": -40.25 
       }, 
       { 
         "id": "p26", 
         "name": "Heart Piece #26", 
         "lat": 63, 
         "lng": -44 
       }, 
       { 
         "id": "p27", 
         "name": "Heart Piece #27", 
         "lat": 28.25, 
         "lng": -27.25 
       } 
      ] 
     }, 
     { 
      "type": "heartContainer", 
      "icon": "heartcontainer.png", 
      "markers": [ 
       { 
         "id": "c1", 
         "name": "Heart Container #1", 
         "lat": -2.75, 
         "lng": 56 
       }, 
       { 
         "id": "test", 
         "name": "Test", 
         "lat": -90, 
         "lng": -90 
       } 
      ] 
     } 
    ] 
} 

，這裏是一些未經測試的代碼示例加載JSON數據，並創建您的標記：

$.getJSON('markers.json', function(json) { 
    json.groups.forEach(function(group) { 
     group.markers.forEach(function(mark) { 
      mark.group = group; 
      addMarker(mark); 
     }); 
    }); 
}); 

function addMarker(mark) { 
    var marker = new google.maps.Marker({ 
     map: map, 
     icon: '/images/icons/' + mark.group.icon, 
     position: new google.maps.LatLng(mark.lat, mark.lng), 
     title: mark.name 
    }); 
} 

該代碼會去你現在正在創建KML層。該代碼使用jQuery的$.getJSON()來下載JSON文件。如果您不想爲此使用jQuery，則可以使用任意數量的等效函數，例如Maps API samples中的downloadUrl()函數。你可以這樣使用它：

downloadUrl('markers.json', function(data) { 
    var json = JSON.parse(data); 
    json.groups.forEach(... 
     ... 
    }); 
}); 

JSON數據的另一種選擇是簡單地把它變成一個腳本。如果你把這個JSON文件放在開頭loadMarkers(開頭，在第一個{之前，並且)結束，在最後}之後，現在JSON文件是一個可執行腳本，它調用全局函數並將它傳遞給JSON數據。調用文件markers.js而不是markers.json，然後你可以在上面鏈接的地圖API樣品中使用非常簡單downloadScript()功能，這樣的事情：

loadMarkers = function(json) { 
    json.groups.forEach(... 
     ... 
    }); 
}; 
downloadScript('markers.js'); 

這應該幫助你開始;給任何問題留言。