这是第一次，所以提前感谢。我试图通过一个location_json与位置在html文件中显示和路由他们之间的地图使用谷歌地图api。当我手动输入location_json时，它工作得很好，例如:
<!DOCTYPE html>
<html>
<head>
<title>Map with Locations and Route</title>
<link rel="stylesheet" type="text/css" href="static/main.css">
<style>
#map {
height: 100%;
}
#map-container {
height: 400px;
width: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=my_api_key"></script>
<script>
var location_json = [{"Location":"Apollonia, Sifnos, Greece"},{"Location":"Artemonas, Sifnos, Greece"},{"Location":"Church of Panagia tis Kimisis, Sifnos, Greece"},{"Location":"Church of Panagia Mirtidiotissa, Sifnos, Greece"},{"Location":"Faros Beach, Sifnos, Greece"}];
var locations = location_json;
function initMap() {
var geocoder = new google.maps.Geocoder();
// Get coordinates of all the locations
var locationCoordinates = [];
var completedRequests = 0;
function geocodeLocation(index) {
if (index < locations.length) {
geocoder.geocode({ address: locations[index].Location }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
locationCoordinates[index] = results[0].geometry.location;
completedRequests++;
} else {
console.log("Geocode was not successful for the following reason: " + status);
}
if (completedRequests === locations.length) {
createMapAndRoute(locationCoordinates);
} else {
geocodeLocation(index + 1);
}
});
}
}
geocodeLocation(0);
}
function createMapAndRoute(locationCoordinates) {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: locationCoordinates[0]
});
var directionsService = new google.maps.DirectionsService();
var directionsRenderer = new google.maps.DirectionsRenderer({ map: map });
var origin = locationCoordinates[0];
var destination = locationCoordinates[locationCoordinates.length - 1];
var waypoints = [];
for (var i = 1; i < locationCoordinates.length - 1; i++) {
waypoints.push({ location: locationCoordinates[i] });
}
var request = {
origin: origin,
destination: destination,
waypoints: waypoints,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);
} else {
console.log("Directions request failed due to " + status);
}
});
}
</script>
</head>
<body onload="initMap()">
<div id="map-container">
<div id="map"></div>
</div>
</body>
</html>
但是如果我插入var location_json = {{ location_json|tojson|safe }};使用完全相同的location_json(从python终端的print命令复制粘贴)而不是var location_json = [{"Location":"Apollonia, Sifnos, Greece"},{"Location":"Artemonas, Sifnos, Greece"},{"Location":"Church of Panagia tis Kimisis, Sifnos, Greece"},{"Location":"Church of Panagia Mirtidiotissa, Sifnos, Greece"},{"Location":"Faros Beach, Sifnos, Greece"}];它给出一个带有控制台错误的空白页Geocode was not successful for the following reason: INVALID_REQUEST
我已经尝试更改大写字母，并在我创建json的熊猫文件中的地址城市和国家之间插入逗号。目的是显示一个地图的位置和路线规划在他们之间出现在json
的顺序。从你的评论-你做location_json = locations_df.to_json(orient='records')和传递location_json(即JSON字符串)到模板。然后在模板中使用tojson过滤器第二次序列化location_json。你应该向模板传递一个字典列表。
查看差异:
data = [{"Location":"Apollonia, Sifnos, Greece"},
{"Location":"Faros Beach, Sifnos, Greece"}]
import json
from jinja2 import Environment, BaseLoader
templ = """var data = {{ data|tojson|safe }}"""
template = Environment(loader=BaseLoader).from_string(templ)
print(template.render(data=data)) # that is what you should do - pass `data` as list of dicts
print(template.render(data=json.dumps(data))) # that is what you do - passing JSON string
输出呈现
var data = [{"Location": "Apollonia, Sifnos, Greece"}, {"Location": "Faros Beach, Sifnos, Greece"}]
var data = "[{"Location": "Apollonia, Sifnos, Greece"}, {"Location": "Faros Beach, Sifnos, Greece"}]"
您还可以检查生成的"blank"的源HTML;页面。
如果你的数据框df看起来像
Location
0 Apollonia, Sifnos, Greece
1 Faros Beach, Sifnos, Greece
你可以做
data = list(df.to_dict('index').values())
print(template.render(data=data))
将产生
var data = [{"Location": "Apollonia, Sifnos, Greece"}, {"Location": "Faros Beach, Sifnos, Greece"}]