简体   繁体   中英

How to load GeoJSON on a google map?

I have the following json file that has been parsed successfully on GEO Lint

{"type":"FeatureCollection",
"features":[
{"type":"Feature",
    "properties":{},
    "geometry":
        {"type":"Polygon",
        "coordinates":[
        [[43.252967,5.379856],
        [43.249466,5.422988],
        [43.245153,5.425048],
        [43.239838,5.383804],
        [43.252967,5.379856],
        [43.252967,5.379856]
        ]]}}]}

My map is created in the ngOnInit{} part of the component:

    ngOnInit() {
    this.map = new 
    google.maps.Map(document.getElementById('mapContainer'), {
          center: {lat: 43.252967, lng: 5.379856},
              zoom: 14,
              disableDefaultUI: true,
              zoomControl: true,
              minZoom: 3,
              maxZoom: 20,
              draggable: true,
              mapTypeId: 'terrain'
        });
        var customLayer = new google.maps.Data();
        this.getSitesandPoints();
      }

The last call to getSiteandPoints function retrieve the data in geoJson format and displays it :

  getSitesandPoints() {
    this.pointsArray = [];
    this.customerApi.getLocations(this.currentUser.id)
    .subscribe((response) => {
      this.locations = response;
      console.log(JSON.stringify(this.locations[0].geoDefinition));
      this.map.data.addGeoJson(this.locations[0].geoDefinition);

    });

The GEO data is not displayed on the map. Could someone help me to find out why ? I tried layers, loadGeoJson method ... in vain.

I thank you in advance for your help.

  [1]: http://geojsonlint.com/

Finally, the problem was fixed. GeoJSON uses Lat, Lng in this order instead of Lng, Lat order. My file was displayed in Ethiopia...

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM