Question

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

$.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并使用该函数包含标记，同时将map变量保持在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添加到array of markers

假设您JSON提供markers并假设每个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);
}

我希望我一直很有帮助。

在Javascript中将外部json中的多个标记添加到Google Map

2 个答案: