关闭后更改并保存信息窗口内的内容

Question

我有一张地图，它可以从JSON中检索到地理位置地理编码，并在地图上贴上标记。

这些标记还具有显示标记名称和评分的infowindow。

在infowindow中有一个按钮，当你点击一个按钮时，它会增加评分计数器。

初始计数器从JSON中检索。令人恼火的是，当信息窗口关闭并重新打开时，计数器值重置。

我试图使用所有标记评级填充对象，单击按钮时更新对象，然后从infowindow的contentString内的对象输出评级。这不起作用，重新打开infowindow后显示相同的初始评级计数器。

我的代码如下，任何帮助将不胜感激。

var map; 
var geocoder; 
var infowindow; 
var rating; 

function initMap() { 
    var mapElement = document.getElementById("map_canvas"); 

    geocoder = new google.maps.Geocoder(); 

    var mapOptions = { 
     center: new google.maps.LatLng(53.481949, -2.237430), 
     zoom: 7, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    infowindow = new google.maps.InfoWindow(); 

    map = new google.maps.Map(mapElement, mapOptions); 
} 

$(document).on('click', '#been-there', function(event){ 
    var entryID = $(this).data('entry-id'); 
    var rating = $(this).data('rating'); 
    var dataString = 'id='+ entryID; 

    rating++; 

    $.ajax({ 
     type: "POST", 
     url: "db-been-there.php", 
     data: dataString, 
     cache: false, 
    }).success(function(html){ 
     console.log(html); 
    }).fail(function(html){ 
     console.log(html); 
    }); 

    $('#rating').html(rating); 

}); 

$.getJSON("db-output.php", function(dbJSON) { 
    $.each(dbJSON, function(key, data) { 

     var url = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + data.lat + "," + data.lng + "&result_type=sublocality|political&key=AIzaSyCsY-LOPL7dGbA1ShBEu7zMO8_GaSBA3Vg"; 

     $.getJSON(url, function(reverseGeo) { 
      var postal_town = reverseGeo.results[0].formatted_address; 

      geocoder.geocode({ 'address': postal_town}, function(results, status) { 
       if (status == 'OK') { 

        var marker = new google.maps.Marker({ 
         map: map, 
         position: results[0].geometry.location, 
         title: data.name 
        }); 

        var contentString = '<div id="content">'+ 
         '<h1>' + data.name + '</h1>' + 
         '<button id="been-there" data-rating="' + data.rating + '" data-entry-id="' + data.id + '">Seen it</button>' + 
         '<p><strong>Rating: </strong><span id="rating">' + data.rating + '</span></p>' + 
         '</div>'; 

        marker.addListener('click', function() { 
         infowindow.setContent(contentString); 
         infowindow.open(map, marker); 
        }); 

       } else { 
        alert('Geocode was not successful for the following reason: ' + status); 
       } 
      }); 
     }); 
    }); 
}); 

---

编辑：解析的代码和的jsfiddle下面

解决的jsfiddle：https://jsfiddle.net/BleepyEvans/3czqmqav/

var locations = [ 
    { 
     "id": "1", 
     "name": "Location 1", 
     "lat": "53.408371", 
     "lng": "-2.991573", 
     "rating": "17" 
    }, 
    { 
     "id": "2", 
     "name": "Location 2", 
     "lat": "53.789528", 
     "lng": "-2.969411", 
     "rating": "8" 
    }, 
] 

var map; 
var geocoder; 
var infowindow; 
var rating; 
var markers = []; 

function initMap() { 
    var mapElement = document.getElementById("map_canvas"); 

    geocoder = new google.maps.Geocoder(); 

    var mapOptions = { 
     center: new google.maps.LatLng(53.481949, -2.237430), 
     zoom: 7, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    infowindow = new google.maps.InfoWindow(); 

    map = new google.maps.Map(mapElement, mapOptions); 
} 

$(document).on('click', '#been-there', function(event){ 
    var entryID = $(this).data('entry-id'); 
    var dataString = 'id='+ entryID; 

    rating = markers[entryID].rating; 
    rating++; 

    markers[entryID].rating = rating; 

     console.log(markers[entryID].rating); 

    $('#rating').html(rating); 

}); 

$.each(locations, function(key, data) { 

    var url = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + data.lat + "," + data.lng + "&result_type=sublocality|political&key=AIzaSyCsY-LOPL7dGbA1ShBEu7zMO8_GaSBA3Vg"; 

    $.getJSON(url, function(reverseGeo) { 
     var postal_town = reverseGeo.results[0].formatted_address; 

     geocoder.geocode({ 'address': postal_town}, function(results, status) { 
      if (status == 'OK') { 

       var marker = new google.maps.Marker({ 
        map: map, 
        position: results[0].geometry.location, 
        title: data.name, 
        rating: data.rating 
       }); 

       markers[data.id] = marker; 

       console.log(markers[data.id].rating); 

       marker.addListener('click', function() { 
         var contentString = '<div id="content">'+ 
        '<h1>' + data.name + '</h1>' + 
        '<button id="been-there" data-rating="' + data.rating + '" data-entry-id="' + data.id + '">Been There</button>' + 
        '<p><strong>Rating: </strong><span id="rating">' + markers[data.id].rating + '</span></p>' + 
        '</div>'; 

        infowindow.setContent(contentString); 
        infowindow.open(map, marker); 
       }); 

      } else { 
       alert('Geocode was not successful for the following reason: ' + status); 
      } 
     }); 
    }); 
}); 

Answer 1

而不是只建立一个HTML字符串，其中包括评级数据，你分配给您的infowindow，我会将评分值添加到标记对象本身。

var marker = new google.maps.Marker({ 
    map: map, 
    position: results[0].geometry.location, 
    title: data.manufacturer_name, 
    rating: data.rating 
}); 

保存那些标记在键连接在其ID的对象：

markers[data.id] = marker; 

然后，当用户点击该按钮时，更新该值：

$(document).on('click', '#been-there', function(event){ 
    var entryID = $(this).data('entry-id'); 
    rating = markers[entryID].rating; 
    rating++; 

和更新的值标记：

markers[entryID].rating = rating; 

如果它不能直接访问标记上的rating属性，则可能需要使用：

markers[entryID].get('rating'); 
markers[entryID].set('rating', rating);