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

Question

我有一张 map ，可以对从 JSON 检索到的位置进行地理编码，并在 map 上粘贴一个标记。

标记还有一个信息窗口，显示标记名称和评级。

信息窗口内有一个按钮，当您单击按钮时，该按钮会增加评级计数器。

初始计数器是从 JSON 中检索的。

令人烦恼的是，当信息窗口关闭并重新打开时，计数器值会重置。

我尝试用所有标记评级填充一个对象，单击按钮时更新该对象，然后从信息窗口的 contentString 内的对象输出评级。这不起作用，重新打开信息窗口后会显示相同的初始评级计数器。

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

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 字符串，而是将评级值添加到 Marker 对象本身。

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