vue parse json data и установите для маркера lat, lng для точек

Question

Я получаю из API данные json, но не могу разобрать данные при возврате, не могу найти какое-либо решение.

 return {
            mapName: this.name + "-map",
            markerCoordinates: [{
                latitude: 21.423229,
                longitude: -0.1921837
            }, {
                latitude: 24.505874,
                longitude: -12.1838486
            }, {
                latitude: 66.4998973,
                longitude: 22.202432
            }],

, а ответ от API:

[{"idLocation":1,"id":2,"latitude":"32.1231","longitude":"-12,5552","created_at":null,"updated_at":null},

Iхочу передать данные json в широту и долготу.

Спасибо за помощь.

Answer 1

Спасибо за ваш ответ, но я получаю это предупреждение:

Vue warn: Error in mounted hook: "TypeError: Cannot read property 'latitude' of undefined"

Здесь мой код:

<script>
    import CarMap from "./CarMap";
    import axios from 'axios';

    export default {
        components: {CarMap},
        name: 'CarMap',
        props: ['CarMap'],
        data: function () {
            return {
                mapName: this.name + "-map",
                markerCoordinates: [],
                map: null,
                bounds: null,
                markers: [],
                locations: null,
            }
        },


        created() {
            this.fetchData();
        },
        methods: {
            fetchData() {
                this.error = this.locations = null;
                this.loading = true;
                axios
                    .get('/api/locations')
                    .then(response => (this.locations = response))
            }
        },

        mounted: function () {
            this.fetchData();
            this.bounds = new google.maps.LatLngBounds();
            const element = document.getElementById(this.mapName)
            const mapCentre = this.markerCoordinates[0]
            const options = {
                center: new google.maps.LatLng(mapCentre.latitude, mapCentre.longitude)
            }

            this.map = new google.maps.Map(element, options, document.getElementById('mapName'));
            this.markerCoordinates.push({
                latitude: 'locations.latitude',
                longitude: 'location.longitude'
            });
            this.markerCoordinates.forEach((coord) => {
                const position = new google.maps.LatLng(coord.latitude, coord.longitude);
                const marker = new google.maps.Marker({
                    position,
                    map: this.map
                });
                this.markers.push(marker)
                this.map.fitBounds(this.bounds.extend(position))
            });
        }
    };
</script>

Я хочу установить маркеры на карте через Координаты в моей таблице местоположений / api.

Answer 2

В своем ответе вы можете сделать вот так.

объявить markerCoordinates как массив, чтобы он выглядел следующим образом. маркерКоординаты: []

this.markerCoordinates.push({
     latitude: 'latitude data',
     longitude: 'longitude data
})