从外部 json 添加多个标记到 Javascript 中的 Google 地图

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 添加到 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);
}

希望对您有所帮助。

从外部 json 添加多个标记到 Javascript 中的 Google 地图

Adding multiple markers from external json to Google Map in Javascript

javascript

google-maps

google-maps-markers