json post后在javascript中从python访问值

Question

发誓我以前做过，永远不知道要改变什么

Python

@csrf_exempt
def add_trip_to_map(request):
    trip_id = request.POST['trip_id']
    trip = Trip.objects.get(pk = trip_id)
    orig, dest = trip.load.orig, trip.load.dest
    data = {'orig_lat':str(orig.lat),
            'orig_lon':str(orig.lon),
            'dest_lat':str(dest.lat),
            'dest_lon':str(dest.lon)}
    return HttpResponse(json.dumps(data))

JS

    $.post( "{% url 'add_trip_to_map' %}", { trip_id: trip_id }, function( data ) {
console.log(data);
    //console.log(data["dest_lon"]);

    var marker = new mapboxgl.Marker()
.setLngLat([data["dest_lat"], data["dest_lon"]])
.addTo(map);

console.log(data) 如下所示：

{"orig_lat": "33.493100", "orig_lon": "117.131700", "dest_lat": "32.454500", "dest_lon": "99.738100"}

但我无法访问 js 中的值

lng_lat.js:40 Uncaught Error: Invalid LngLat object: (NaN, NaN)

Answer 1

我假设您的第一个问题是：您的帖子的返回值是一个字符串。如果是这样，你需要转换它：

 data = JSON.parse(data);

第二个问题与您的 lon/lat 相关：它们必须在 -90 ... +90 范围内

mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
    center: [-74.5, 40], // starting position [lng, lat]
    zoom: 9 // starting zoom
});

var data = '{"orig_lat": "33.493100", "orig_lon": "117.131700", "dest_lat": "32.454500", "dest_lon": "99.738100"}';

data = JSON.parse(data);

var lon = (Math.abs(parseFloat(data["dest_lon"])) > 90) ? '90' : data["dest_lon"];
var lat = (Math.abs(parseFloat(data["dest_lon"])) > 90) ? '90' : data["dest_lat"];

var marker = new mapboxgl.Marker()
        .setLngLat([data["dest_lat"], data["dest_lon"]])
        .addTo(map);

<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />


<div id='map' style='width: 400px; height: 300px;'></div>