0

I'm trying to do it in good way, but I can't.. Please tell me where is the problem.

Variable latlng is empty outside the jsondata.addListener.. I want to pass the latlng variable to:

var latlngbounds = new google.maps.LatLngBounds();
latlng.each(function(n){
   latlngbounds.extend(n);
});

But it doesn`t work..

This is my code:

<script>
var map;
var jsondata;
var marker;
var latlng=[];
function initMap() {

map = new google.maps.Map(document.getElementById('gmap'), {
zoom: 9,
center: {lat: 51.431635, lng: 12.3198106},
mapTypeControl: false 
});

jsondata=new google.maps.Data();
jsondata.loadGeoJson('/resources/geojson/all.geojson');

jsondata.setStyle({
  strokeColor: '#000000',
  fillColor: '#000000',
  strokeWeight: 1,
  fillOpacity:0.5,
  zIndex:999
 });
var i=0;

jsondata.addListener('addfeature', function(event) {
  var symbol=event.feature.getProperty('SYMBOL');

 marker = new google.maps.Marker({
        position: event.feature.getGeometry().getArray()[0]["j"][0]["j"][0],
        label: "S"+symbol,
        map: map
      });

    var myLatLng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
        latlng[i++]=myLatLng;                       
});

**//alert(latlng);**

var latlngbounds = new google.maps.LatLngBounds();
latlng.each(function(n){
   latlngbounds.extend(n);
});

map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);

jsondata.setMap(map);


};
</script>
4

1 回答 1

0

您试图在填充之前访问 latlng 数组（该.loadGeoJson方法是异步的，从服务器检索数据需要时间）。最好在创建标记位置时将它们添加到 latlngbounds 对象（而不是在单独的循环中进行）。

  jsondata.addListener('addfeature', function(event) {
    var marker = new google.maps.Marker({
      position: event.feature.getGeometry().get(),
      label: event.feature.getProperty("name"),
      title: event.feature.getProperty("name"),
      map: map
    });

    latlngbounds.extend(marker.position);
    map.fitBounds(latlngbounds);
  });

代码片段：

var map;
var jsondata;
var marker;
var latlng = [];

function initMap() {
  map = new google.maps.Map(document.getElementById('gmap'), {
    zoom: 9,
    center: {
      lat: 51.431635,
      lng: 12.3198106
    },
    mapTypeControl: false
  });

  jsondata = new google.maps.Data();

  jsondata.setStyle({
    strokeColor: '#000000',
    fillColor: '#000000',
    strokeWeight: 1,
    fillOpacity: 0.5,
    zIndex: 999
  });

  var latlngbounds = new google.maps.LatLngBounds();
  jsondata.addListener('addfeature', function(event) {

    var marker = new google.maps.Marker({
      position: event.feature.getGeometry().get(),
      label: event.feature.getProperty("name"),
      title: event.feature.getProperty("name"),
      map: map
    });

    latlngbounds.extend(marker.position);
    map.fitBounds(latlngbounds);

  });
  jsondata.addGeoJson(geoJson);
  jsondata.setMap(map);
};
google.maps.event.addDomListener(window, 'load', initMap);
var geoJson = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [13.4795, 52.4215]
    },
    "properties": {
      "file": "berlin_germany.geojson",
      "name": "Berlin, Germany"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [6.728, 51.4465]
    },
    "properties": {
      "file": "duisburg_germany.geojson",
      "name": "Duisburg, Germany"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [8.6265, 50.0395]
    },
    "properties": {
      "file": "frankfurt_germany.geojson",
      "name": "Frankfurt, Germany"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [10.027, 53.496]
    },
    "properties": {
      "file": "hamburg_germany.geojson",
      "name": "Hamburg, Germany"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [8.8195, 53.2625]
    },
    "properties": {
      "file": "bremen_germany.geojson",
      "name": "Bremen, Germany"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [6.8155, 51.2385]
    },
    "properties": {
      "file": "duesseldorf_germany.geojson",
      "name": "Duesseldorf, Germany"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [11.018, 49.488]
    },
    "properties": {
      "file": "nuremberg_germany.geojson",
      "name": "Nuremberg, Germany"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [8.3545, 48.988]
    },
    "properties": {
      "file": "karlsruhe_germany.geojson",
      "name": "Karlsruhe, Germany"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [13.779, 51.079]
    },
    "properties": {
      "file": "dresden_germany.geojson",
      "name": "Dresden, Germany"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [12.3895, 51.343]
    },
    "properties": {
      "file": "leipzig_germany.geojson",
      "name": "Leipzig, Germany"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [8.731, 50.808]
    },
    "properties": {
      "file": "marburg_germany.geojson",
      "name": "Marburg, Germany"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [11.4885, 48.12]
    },
    "properties": {
      "file": "munich_germany.geojson",
      "name": "Munich, Germany"
    }
  }]
};
html,
body,
#gmap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="gmap"></div>

于 2015-11-29T14:10:11.150 回答