Angular ionic2如何从外部url使用json数据？

我试图从一个json文件中获取数据，并在文件中显示经度和纬度以显示在google地图中，但是当从url读取文件时，我遇到了一个小问题。我正在使用本教程

这是我的错误信息

Runtime Error
Cannot read property 'lat' of undefined
Stack
TypeError: Cannot read property 'lat' of undefined
    at HomePage.loadMap (http://localhost:8100/build/main.js:58172:54)
    at HomePage.ionViewDidLoad (http://localhost:8100/build/main.js:58164:14)
    at ViewController._lifecycle (http://localhost:8100/build/main.js:17293:33)
    at ViewController._didLoad (http://localhost:8100/build/main.js:17166:14)
    at NavControllerBase._didLoad (http://localhost:8100/build/main.js:43860:18)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:8971)
    at Object.onInvoke (http://localhost:8100/build/main.js:4480:37)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:8911)
    at r.run (http://localhost:8100/build/polyfills.js:3:4140)
    at NgZone.run (http://localhost:8100/build/main.js:4348:62)

这是typescript文件

  loadMap() {
     var markers= this.http.get('http://thethinker.com.ng/techwand/usr.php').map(res => res.json()).subscribe(response => {
        return response.data;
});

      var mapOptions = {
        center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var infoWindow = new google.maps.InfoWindow();
    var latlngbounds = new google.maps.LatLngBounds();
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    var i = 0;
    var interval = setInterval(function () {
        var data = markers;
        var myLatlng = new google.maps.LatLng(data.lat, data.lng);
        var icon = "http://maps.google.com/mapfiles/ms/icons/green.png";
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: data.title,
            animation: google.maps.Animation.DROP,
            icon: new google.maps.MarkerImage(icon)
        });
        (function (marker, data) {
            google.maps.event.addListener(marker, "click", function (e) {
                infoWindow.setContent(data.description);
                infoWindow.open(map, marker);
            });
        })(marker, data);
        latlngbounds.extend(marker.position);
        i++;
        if (i == markers.length) {
            clearInterval(interval);
            var bounds = new google.maps.LatLngBounds();
            map.setCenter(latlngbounds.getCenter());
            map.fitBounds(latlngbounds);
        }
    }, 80);
}

---

我也尝试过使用普通字符串数组，它的工作原理与教程中类似，但我不知道如何从外部url使其工作。

您正在尝试访问

标记[0]。lat

但标记异步加载，这意味着标记尚未定义。尝试将http请求下方的整个代码移动到

.subscribe

回调中。然后，您应该能够使用

response.data[0].lat访问标记。仍然不工作。获取新错误运行时错误最大调用堆栈大小exceeded@AndreasGassmann是完全正确的，你能用AndreasGassmann的建议编辑你的代码吗？可能重复的代码工作正常谢谢你尝试访问
标记[0]。lat
，但标记是异步加载的，这意味着标记尚未定义。尝试将http请求下方的整个代码移动到
.subscribe
回调中。然后，您应该能够使用
response.data[0].lat访问标记。仍然不工作。获取新错误运行时错误最大调用堆栈大小exceeded@AndreasGassmann是完全正确的，你能用AndreasGassmann的建议编辑你的代码吗？可能重复的代码工作正常谢谢