Оновіть Карти Google за допомогою файлів GeoJSON або KML за допомогою JavaScript API
KML (мова розмітки Keyhole) і GeoJSON (Географічний JSON) — це два формати файлів, які використовуються для структурованого зберігання географічних даних. Кожен формат підходить для різних типів програм і може використовуватися в різних картографічних сервісах, в т.ч Google Maps. Розглянемо деталі кожного формату та наведемо приклади:
Файл KML
KML — це формат на основі XML для представлення географічних даних, розроблений для використання з Google Планета Земля. Він чудово підходить для відображення точок, ліній, багатокутників і зображень на картах. Файли KML можуть містити такі функції, як позначки місць, шляхи, багатокутники, стилі тощо.
Приклад файлу KML:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>Example KML</name>
<Placemark>
<name>New York City</name>
<description>New York City</description>
<Point>
<coordinates>-74.006,40.7128,0</coordinates>
</Point>
</Placemark>
</Document>
</kml>
Цей приклад KML визначає одну позначку місця для Нью-Йорка. The <coordinates>
тег визначає довготу, широту та висоту (у такому порядку), при цьому висота є необов’язковою.
Файл GeoJSON
GeoJSON — це формат для кодування різноманітних структур географічних даних за допомогою JSON. Він підтримує такі типи геометрії, як Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon і GeometryCollection.
Приклад файлу GeoJSON:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "New York City",
"description": "New York City"
},
"geometry": {
"type": "Point",
"coordinates": [-74.006, 40.7128]
}
}
]
}
Цей приклад GeoJSON також визначає одну точку для міста Нью-Йорк, подібно до прикладу KML. The coordinates
масив містить довготу та широту.
Відмінності та використання
- KML часто використовується з Google Планета Земля та іншими програмами, які потребують багатих географічних приміток і стилів. Він дуже підходить для оповідання історій або докладних географічних презентацій.
- GeoJSON більш легкий і зазвичай використовується у веб-додатках, особливо тих, які використовують JavaScript. Це кращий формат для веб-картографічних програм і ГІС програмного забезпечення завдяки його простоті та сумісності з нотацією об’єктів JavaScript.
Обидва формати мають вирішальне значення в різних стратегіях продажів і маркетингу, особливо при географічному відображенні даних про клієнтів, аналізі ринкових тенденцій або плануванні маркетингових кампаній на основі місцезнаходження. Здатність візуально представляти дані на картах може бути потужним інструментом у цих контекстах, допомагаючи краще приймати рішення та розробляти стратегію.
Як вставити KML або GeoJSON у свою карту Google
Щоб вставити файл KML або JSON із географічними даними за допомогою JavaScript API Карт Google, потрібно виконати такі дії для кожного типу файлу:
Вбудовування файлу KML
- Підготуйте файл KML: переконайтеся, що ваш файл KML доступний онлайн. Він має бути загальнодоступним, щоб Карти Google могли його отримати.
- Створіть карту: Ініціалізуйте нову карту Google у своїй програмі.
- Завантажте шар KML: Використовувати
google.maps.KmlLayer
клас, щоб додати файл KML на карту.
Приклад коду:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: -34.397, lng: 150.644}
});
var kmlLayer = new google.maps.KmlLayer({
url: 'http://yourdomain.com/path/to/yourfile.kml',
map: map
});
}
заміщати 'http://yourdomain.com/path/to/yourfile.kml'
з URL-адресою вашого файлу KML.
Вбудовування файлу JSON
- Підготуйте файл JSON: Ваш JSON має бути у форматі GeoJSON, стандартному форматі для кодування географічних даних.
- Створіть карту: як і у випадку з KML, ініціалізуйте Google Map у своїй програмі.
- Завантажте шар GeoJSON: Використовувати
map.data.loadGeoJson()
для додавання ваших даних GeoJSON на карту.
Приклад коду:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -28, lng: 137}
});
// Assuming your GeoJSON file is located at the specified URL
map.data.loadGeoJson('http://yourdomain.com/path/to/yourfile.json');
}
заміщати 'http://yourdomain.com/path/to/yourfile.json'
з URL-адресою вашого файлу GeoJSON.
Що потрібно мати на увазі,
- Переконайтеся, що файли KML і GeoJSON правильно відформатовані та загальнодоступні.
- Потрібен ключ Google Maps JavaScript API. Включіть його у свій HTML файл, у який завантажується скрипт Google Maps.
- Налаштуйте карту
zoom
таcenter
властивості відповідно до географічного розташування ваших даних.
Інтегруючи файли KML або GeoJSON у такий спосіб, ви можете ефективно відображати багаті географічні дані у своїй веб-програмі, пропонуючи користувачам динамічну та інтерактивну карту. Це може бути особливо корисним у різних контекстах продажу та маркетингу, де візуалізація географічних даних може покращити розуміння та залучення потенційних клієнтів або членів команди.