javascript - Google map 未加载变量值

Question

我正在尝试通过ajax加载Google map ，但如果我传递我的变量，即location_data， map 将不会显示，但如果我手动将相同的数据放入标记数组中，它会显示 map 以及标记因此。其次，我想通过 ajax 使用新标记重新加载 map ，但遇到了同样的问题。我尝试了所有可能的解决方案，但没有任何效果对我来说，我不知道我做错了什么。

这是我的 HTML 代码，用于显示 JSON 和 map 中的数组

<div id="print_json">JSON Data Here</div>
<div id="map"></div>

这是从我的 PHP 文件返回

["['test 1', 25.1212, 55.1535, 5]","['test 2', 25.2084, 55.2719, 6]","['test 3', 25.2285, 55.3273, 7]"]

这是我的 JavaScript

function initMap(location_data) {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };

    // Display a map on the web page
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    map.setTilt(50);

    // Multiple markers location, latitude, and longitude
    alert(location_data);
    //var markers = location_data;
    var markers = [
        ['test 1', 25.1212, 55.1535, 5],
        ['test 2', 25.2084, 55.2719, 6],
        ['test 3', 25.2285, 55.3273, 7]
    ];

    // Info window content
    var infoWindowContent = [
        ['<div class="info_content">' +
            '<h3>Brooklyn Museum</h3>' +
            '<p>The Brooklyn Museum is an art museum located in the New York City borough of Brooklyn.</p>' + '</div>'
        ],
        ['<div class="info_content">' +
            '<h3>Brooklyn Public Library</h3>' +
            '<p>The Brooklyn Public Library (BPL) is the public library system of the borough of Brooklyn, in New York City.</p>' +
            '</div>'
        ],
        ['<div class="info_content">' +
            '<h3>Prospect Park Zoo</h3>' +
            '<p>The Prospect Park Zoo is a 12-acre (4.9 ha) zoo located off Flatbush Avenue on the eastern side of Prospect Park, Brooklyn, New York City.</p>' +
            '</div>'
        ]
    ];

    // Add multiple markers to map
    var infoWindow = new google.maps.InfoWindow(),
        marker, i;

    // Place each marker on the map  
    for (i = 0; i < markers.length; i++) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });

        // Add info window to marker    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        // Center the map to fit all markers on the screen
        map.fitBounds(bounds);
    }

    // Set zoom level
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(5);
        google.maps.event.removeListener(boundsListener);
    });

}


// Sets the map on all markers in the array.

// Load initialize function
//google.maps.event.addDomListener(window, 'load', initMap);

$(document).ready(function() {
    var location_data;
    $("#mapped").on("change", function() {
        var dataname = $(".selectpicker option:selected").val();
        $.ajax({
            url: "findforwork.php",
            //contentType: "application/json; charset=UTF-8",
            //dataType: "application/json",
            type: "POST",
            data: "searchid=" + dataname,
            success: function(response) {
                //alert('Success' + response);
                $("#print_json").html(response.replace(/\"/g, ""));
                console.log(JSON.parse(response));
                var location_data = response.replace(/\"/g, "");
                var mapDiv = document.getElementById('map');
                google.maps.event.addDomListener(mapDiv, "load", initMap(location_data));
            }
        }); //End Of Ajax
    }); //End of mapped
});

Answer 1

JSON.parse() 在.replace()

之后

var response= '["[\'test 1\', 25.1212, 55.1535, 5]","[\'test 2\', 25.2084, 55.2719, 6]","[\'test 3\', 25.2285, 55.3273, 7]"]';
var location_data = JSON.parse(response.replace(/\"/g, "").replace(/\'/g, "\""));
console.log(location_data);

输出

0: Array(4) [ "test 1", 25.1212, 55.1535, … ]
1: Array(4) [ "test 2", 25.2084, 55.2719, … ]
2: Array(4) [ "test 3", 25.2285, 55.3273, … ]