使用 $.each 从对象添加地图标记不起作用

Question

这是我的代码。如果我使用 loadGeoJson，它会显示标记。如果我使用 $.getJSON 将数据加载到一个对象并逐步添加每个标记，我看不到任何标记。我确实看到所有名称都显示在 "pList" div 中，所以我知道它正在正确循环并正确访问对象的属性。我错过了什么？

var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

$.getJSON( "data.json", function( data ) {
    participants = data.features;
}).done(function(){
    $.each( participants, function(i, p){
        $('#pList').append('<div>' + p.properties.name + '</div>');
        marker = new google.maps.Marker({
            position: new google.maps.LatLng (p.geometry.coordinates[0], p.geometry.coordinates[1]),
            map: map,
            title: p.properties.name
        });
    });
    //map.data.loadGeoJson('data.json');
});

Answer 1

您必须切换标记位置的参数。

在 geoJSON 中，点几何的第一项是经度，第二项是纬度，但是 google.maps.LatLng 需要顺序 1. 纬度 2. 经度。

目前，当 p.geometry.coordinates[1] 在 -85,85 范围内时，您的代码只会绘制一个标记（但不会在所需位置），因为这是纬度的有效范围。

    marker = new google.maps.Marker({
        position: new google.maps.LatLng (p.geometry.coordinates[1],
                                          p.geometry.coordinates[0]),
        map: map,
        title: p.properties.name
    });

如果这不能解决问题，map-变量显然无法在 done-回调中访问。

使用 $.each 从对象添加地图标记不起作用

Adding map markers from object using $.each doesn't work

json

google-maps-api-3

google-maps-markers

each