谷歌地图:从监听器获取变量值

Question

我试图用一种好的方式来做这件事，但我做不到。。请告诉我问题出在哪里。

变量latlng在jsondata.addListener外部为空。。我想将latlng变量传递给：

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

但是它不起作用。。

这是我的代码：

<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>

Answer 1

您正试图在填充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>