谷歌地图未加载变量值

Question

我正在尝试通过ajax加载谷歌地图，但是如果我传递我的变量，地图不会显示，即location_data但是如果我手动将相同的数据放在标记数组中，它会相应地显示地图和标记。其次，我想用新标记通过 ajax 重新加载地图，但遇到了同样的问题。我尝试了所有可能的解决方案，但没有任何适合我的方法，我不知道我做错了什么。

这是我的HTML代码，用于显示来自JSON和映射的数组

<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

.replace()后JSON.parse()

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, … ]