API Карт Google 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, который не использует эти координаты.

Когда вы создаете маркеры с API Карт, он проходит через пользовательскую проекцию, но я не думаю, что слои KML это делают.

Предположительно, этот файл KML - это то, что вы создаете на своем сервере или с помощью какого-то скрипта? Затем вы можете проецировать координаты по мере необходимости, когда вы создаете KML, чтобы соответствовать проекции, используемой в вашем коде 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 для этого, есть количество эквивалентных функций, которые вы могли бы использовать, например, функция downloadUrl() в Maps API samples. Вы можете использовать его следующим образом:

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

Другой вариант для данных JSON - просто превратить его в скрипт.Если вы возьмете этот файл JSON и положите loadMarkers( в начале, перед первым { и положите ) в конце, после последнего }, теперь файл JSON является исполняемым скриптом, который вызывает глобальную функцию loadMarkers() и передает ей данные JSON , Вызов файла markers.js вместо markers.json, а затем вы можете использовать очень простую downloadScript() функцию в образце API Карт связаны выше, что-то вроде этого:

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

Это должно помочь вам начать работу; дайте крик с любыми вопросами.