關閉後更改並保存信息窗口內的內容

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);