Question

在我的代码中，我想解析JSON数据并显示Google Maps信息窗口，但是当我通过JSON.parse()函数进行转换并将其作为变量信息传递时，Maps信息窗口将无法正常工作，但是当我使用{{ 1}}函数将结果转换并显示在JSON.parse中，然后手动将转换后的值放入其中，以正确显示信息窗口

这是我通过AJAX / JSON Raw返回的内容

textarea

这是我显示信息窗口所需要的

[
    "['<div class=\"info_content\"><h3>test 1<\/h3><h4>Contact: 33<\/h4><p>33<\/p><\/div>']",
    "['<div class=\"info_content\"><h3>test 2<\/h3><h4>Contact: 22<\/h4><p>22<\/p><\/div>']",
    "['<div class=\"info_content\"><h3>test 3<\/h3><h4>Contact: 55<\/h4><p>55<\/p><\/div>']"
]

这是我出现问题的JS部分

[
    ['<div class="info_content"><h3>test 1</h3><h4>Contact: 33</h4><p>33</p></div>'],
    ['<div class="info_content"><h3>test 2</h3><h4>Contact: 22</h4><p>22</p></div>'],
    ['<div class="info_content"><h3>test 3</h3><h4>Contact: 55</h4><p>55</p></div>']
]

完整的JS代码

//Ajax Success response
var location_box = JSON.parse(response);
var infoWindowContent = location_box;
// Add multiple markers to map
var infoWindow = new google.maps.InfoWindow(), marker, i;

PHP代码生成JSON数据

<script>
    var markers = [];

    function initMap(location_data, location_box) {
        var map;
        var bounds = new google.maps.LatLngBounds();
        var mapOptions = {
            mapTypeId: 'roadmap',
            center: new google.maps.LatLng(54.57951, -4.41387),
        };

        // 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]];

        var infoWindowContent = location_box;

        // 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(15);
            google.maps.event.removeListener(boundsListener);
        });

    }

    $(document).ready(function() {
        var location_data;
        $("#mapped").on("change", function() {
            var dataname = $(".selectpicker option:selected").val();
            $.ajax({
                url: "findforwork.php",
                type: "POST",
                data: "searchid=" + dataname,
                success: function(response) {
                    //alert('Success' + response);
                    var str_response = response;
                    var res_new = str_response.split("==============");
                    var location_data = JSON.parse(res_new[0].replace(/\"/g, "").replace(/\'/g, "\""));
                    var location_box = res_new[1]; // Info windows Array will be here
                    $('#infoBx').val(location_box);
                    var mapDiv = document.getElementById('map');
                    google.maps.event.addDomListener(mapDiv, "load", initMap(location_data, location_box));
                }
            }); //End Of Ajax
        }); //End of mapped
    });
</script>

Answer 1

不清楚响应是数组还是字符串。如果它是字符串数组，则应该解析每个成员，例如：

var location_box = response.map(x=>JSON.parse(x));

这样，location_box将是一个包含一个元素数组的数组。

编辑：

根据您的代码，响应var是一个字符串，因此，首先解析它：

var location_box = JSON.parse(res_new[0]).map(x=>JSON.parse(x));

JSON解析不会转换为数组

1 个答案: