[英]Google Maps not loading with variable value
我正在嘗試通過Ajax加載Google Maps,但是如果我傳遞變量即location_data
則不會顯示地圖,但是如果我手動將相同的數據放入markers數組中,則會相應地顯示地圖和marker。 其次,我想通過帶有新標記的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
});
.replace()
之后的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, … ]
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.