使用Javascript从外部json向Google Map添加多个标记

Question

我从服务器接收json数据，需要将它们添加到Google地图。 它工作正常，但是，我只看到一个标记，并且我假设每次添加一个标记都会将其更改为新坐标，并且不会添加额外的标记。 如何将标记定义为数组？

$.getJSON(url, function(data) {

var entry = data.feed.entry;


$(entry).each(function(){
   for (var prop in this["gsx$instruments"]) {
    //alert(this["gsx$instruments"][prop]);
    listContacts(this["gsx$instruments"][prop])
        var myLatLng = {lat: Number(this["gsx$ycor"][prop]), lng: Number(this["gsx$xcor"][prop])};

        var map = new google.maps.Map(document.getElementById('googleMap'), {
          zoom: 13,
          center: myLatLng
        });

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: this["gsx$instruments"][prop]
        });

   }
  // Column names are name, age, etc.
  //$('.results').prepend('<h2>'+this.gsx$instruments.$t+'</h2><p>'+this.gsx$type.$t+'</p>');
});

});

Answer 1

添加新功能addMarker并使用该功能，包括标记也保持映射变量的Ajax调用之外也是如此。 下面的更新代码

var map = new google.maps.Map(document.getElementById('googleMap'), {
          zoom: 13,
          center: {lat: LAT, lng: LONG}
        });
function addMarker(position, map, title){
      var marker = new google.maps.Marker({
      position: position,
      map: map,
      title: title
    });
}

$.getJSON(url, function(data) {

var entry = data.feed.entry;


$(entry).each(function(){
   for (var prop in this["gsx$instruments"]) {
    //alert(this["gsx$instruments"][prop]);
    listContacts(this["gsx$instruments"][prop])
        var myLatLng = {lat: Number(this["gsx$ycor"][prop]), lng: Number(this["gsx$xcor"][prop])};

        addMarker(myLatLng,map,this["gsx$instruments"][prop]);

   }
  // Column names are name, age, etc.
  //$('.results').prepend('<h2>'+this.gsx$instruments.$t+'</h2><p>'+this.gsx$type.$t+'</p>');
});

});

Answer 2

本质上，您首先需要将markers添加到markers array of markers

假设您有提供markers JSON ，并假设每个marker都有一个name和coordinates属性

function formatMarkers (){
  // Loop through all of the JSON entries provided in the response
  for (var i = 0; i < markersArray.length; i++) {

     var markers = markersArray[i];
     // Create popup windows for each record
     var contentString = '<p><b>Name</b>: ' + markers.name + '</p>';

     // Converts each of the JSON records into Google Maps Location format
     formattedMarkers.push({
                    latlon: new google.maps.LatLng( markers.coordinates[1], markers.coordinates[0] ),
                        message: new google.maps.InfoWindow({
                            content: contentString,
                            maxWidth: 320
                        }),
                        username: markers.name
                 });
    }
    return formattedMarkers;
}

然后，您需要渲染每个

formattedMarkers.forEach(function (n) {
  var marker = new google.maps.Marker({
                                       position: n.latlon,
                                       map: map,
                                       icon: icon
                                      });

   // For each marker created, add a listener that checks for clicks
   google.maps.event.addListener(marker, 'click', function () {
          // When clicked, open the selected marker's message
               n.message.open(map, marker);
   });
   marker.setMap(map);
}

希望对您有所帮助。