javascript - 在谷歌地图中显示 parse.com 的所有地理点

Question

我正在尝试从 parse.com 中的一个类中获取所有地理点，并将它们显示为谷歌地图中的标记。 (大约只有 1 个 geoipoin，lat lng，就像一个魅力，所以这里是代码)

 function businessProfile(uid) {
      Parse.initialize("APPID", "JSKEY");
      var bprofile = Parse.Object.extend("magazia");
      var query = new Parse.Query(bprofile);
      query.notEqualTo("objectId", null);
      query.find({
          success: function(results) {
            for (var i = 0; i < results.length; i++) { var object = results[i];
                  var locationsBlock = {};
                  locationsBlock = JSON.parse(JSON.stringify(object));
                  var location = {};
                  location = JSON.parse(JSON.stringify(locationsBlock.latlon));
                  var lat = location.latitude;
                  var lon = location.longitude;
                  var magname = object.get('name');
                  setData(magname, lat, lon);
              }


          },
         error: function(error) {

              alert("Error: " + error.code + " " + error.message);
          }
      });
  }

所以通过上面的代码，我得到了 16 个不同行的所有地理点，并将它们放入一个数组(我希望我做的正确)，该数组在函数外部声明，因为我在 map 初始化时再次调用它下面的功能。

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 34.9, lng: 111.2}
  });

  setMarkers(map);
}
function setData(magname, lat, lon){
    var arlat = [];
arlat.push(magname, lat, lon);
console.log(arlat);
}
function setMarkers(map) {

  for (var i = 0; i < arlat.length; i++) {
    var arlat = arlat[i];
    var marker = new google.maps.Marker({
      position: {lat: arlat[1], lng: arlat[2]},
      map: map,
      title: arlat[0]

    });
  }
}

所以现在我一直在研究如何使用标记将每个地理点放置到 map 中。 我知道它与“for 循环”有关，但我被困在那里。现在它只显示列表标记中的第一个，我想显示所有标记。

更新

所以对我的代码进行了一次更新，我已经成功地传递了我在解析中从类(class)获得的所有名称和经纬度，现在我将它们放入 function setData()

现在的问题是，我如何在 setMarkers() 中传递 arlat 数组，因为 setMarkers 函数从 initMap() 获取 map 变量 并且我希望它也采用 setData() 函数中的 arlat 数组，以便我可以在右侧部分打印经纬度和名称？这是 console.log(arlat)

的预览

Answer 1

而不是推送三个变量:

arlat.push(magname, lat, lon);

你可能应该 push一个对象，像这样:

 arlat.push({lat: lat, lon: lon});

然后我们只需要遍历引脚(您可以使用 for 循环来完成，但是 forEach 可能更简单，因为您不必索引到数组中，只需使用接受数组元素)...

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: iconBase + 'marker.png',

    title: 'Hello World!'
});
arlat.forEach(function(positionObject) {
    var pin = new google.maps.Marker({
        position: {
            lat: positionObject.lat,
            lon: positionObject.lon
        },
        map: map,
        //title: positionObject.title, //if title property is set above
        icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|00ff00' //green pin, more available
    });
});

这对你有用吗？有关图标的更多信息，请查看 google maps API (您可能已经看过)

更新 - 根据您的更新，我注意到您正在重新分配 arlat 的值，这与 foreach 迭代冲突。我已将其更改为使用对象，而不是覆盖数组对象 - 参见 this plunkr或下面的代码片段。

function initialize() {
  var arlat = [];
  setData('a', 34.0, 111.2);
  setData('v', 30.1, 116.3);
  initMap();

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: {
        lat: 34.9,
        lng: 111.2
      }
    });
    setMarkers(map);
  }

  function setData(magname, lat, lon) {
    //notice how we name the properties below: name, lat, lon - these are referenced down below in setMarkers()
    arlat.push({
      name: magname,
      lat: lat,
      lon: lon
    });
  }

  function setMarkers(map) {
    for (var i = 0; i < arlat.length; i++) {
      var marker = new google.maps.Marker({
        position: {
          lat: arlat[i].lat,
          lng: arlat[i].lon
        },
        map: map,
        title: arlat[i].name
      });
    }
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map {
  height: 90%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map"></div>