javascript - 谷歌地图没有加载变量值
问题描述
我正在尝试通过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
});
解决方案
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, … ]
推荐阅读
- java - Springboot 应用程序没有从 Spring Config Server 属性中正确获取值
- cupy - 在急流容器内时出现 hdbscan 错误
- c - 如何打印整个 ELF 文件头及其所有信息?
- django - 视图 awesomeinventory.supplier.views.supplierCreateView 没有返回 HttpResponse 对象。它在创建视图中返回 None
- c - 将指针传递给链表的第一个元素时是否需要临时变量?
- c# - System.Management.Automation 与 .NET Core 3.1 不兼容
- unit-testing - 如何测试前端和 API?
- angular - 我的标记不会显示在 Angular 中的 Google 地图上
- elixir - 如何将字符串日期转换为 DateTime 格式
- javascript - 带有断线的 insertAdjacentHTML Laravel 组件