2015-05-31 6 views
0

Я пытаюсь построить точки на карте с помощью GeoJSON. Я читал справки о которой говорится:Построение POINTS с использованием GeoJSON

Вы можете загрузить и отобразить файл GeoJSON, вызвав loadGeoJSON() метод объекта данных

(https://developers.google.com/maps/documentation/javascript/datalayer)

Однако, образец код на той же странице показывает:

map.data.loadGeoJson (...)

Поэтому я использую пример кода, то есть: .loadGeoJson() вместо .loadGeoJSON() ...

У меня есть файл GeoJSON данных, который я проверенный с помощью www.geojsonlint.com, то есть:

{ 
"type": "FeatureCollection", 
"features": [ 
    { 
     "type": "Feature", 
     "geometry": { 
      "type": "Point", 
      "coordinates": [ 
       -80.87088507656375, 
       35.21515162500578 
      ] 
     }, 
     "properties": { 
      "name": "ABBOTT NEIGHBORHOOD PARK", 
      "address": "1300 SPRUCE ST" 
     } 
    } 
] 
} 

Блочный код, который загружает файл выше, где «url_to_geojson_file» является URL для данных, приведенных выше (проверено путем вырезания и вставки URL в браузере; поэтому файл существует и доступен для загрузки).

try { 
     map.data.loadGeoJson("url_to_geojson_file"); 
    } 
    catch(ex) { 
     alert("Error loading GeoJson:" + ex.toString()); 
    } 

Ничего не отображается на карте, хотя карта оказывает. Ошибки не попадают в блок try/catch. Я даже установил центральную точку в те же координаты, что и в файле GeoJson. Я также попытался использовать .SetStyle() с различными параметрами без эффекта.

У кого-нибудь есть рабочий пример, который отображает одну или несколько точек из файла данных GeoJson?

Я нашел примеры полигонов и линий, но я не нашел простой пример, демонстрирующий использование точек.

+0

Что такое URL файла, который вы пытаетесь загрузить? [Опубликованный GeoJSON работает для меня] (http://jsfiddle.net/hsbhcwnb/). Просьба представить [Минимальный, полный, проверенный и читаемый пример] (http://stackoverflow.com/help/mcve), который демонстрирует вашу проблему. – geocodezip

ответ

1

Surfing the web Я нашел пример, который я приспособил к вашим потребностям. Надеюсь, вы будете полезны.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Simple json test</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 

    </head> 
    <body> 
    <div id="map-canvas"></div> 
    <script> 
    var map; 
    function initialize() { 

    //Initialise the map 
    var myLatLng = new google.maps.LatLng(53.231472,-0.539783); 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
     zoom: 13, 
     center: myLatLng, 
     scrollwheel: false, 
     panControl: false, 
     zoomControl: false, 
     scaleControl: true, 
     disableDefaultUI: true 
    }); 

    //Initialise base folder for icons 
    var iconBase = '/static/images/icons/'; 

    //Load the JSON to show places 
    map.data.loadGeoJson('http://localhost/geo.json'); 

    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </body> 
</html> 

Помещенный ниже JSON в файле http://localhost/geo.json для локального тестирования

{ 
    "type": "FeatureCollection", 
    "features": [ 
    { 
     "type": "Feature", 
     "geometry": { 
     "type": "Point", 
     "icon": "/static/images/icons/map-marker-do.png", 
     "coordinates": [ 
      -0.53743, 
      53.23437 
     ] 
     }, 
     "properties": { 
     "name": "Cathedral", 
     "description": "One of European's finest Gothic buildings, once the tallest building in the world that dominates Lincoln's skyline.", 
     "icon": "/static/images/icons/map-marker-do.png" 
     } 
    } 
    ] 
} 
+0

Да - благодарю вас! – bdcoder

Смежные вопросы