标记未在Google地图中加载

Question

我能够从我的Ionic app中包含的本地数据库加载标记，这只是一个简单的lat / lon coords数组。问题是当我尝试从Web上的JSON文件加载它们时。任何帮助，将不胜感激。谢谢！

这是我使用的电话：

get('assets/data/markers.json')

这一切都适用于从本地数据文件填充地图。

现在我的问题是我想显示位于以下位置的JSON文件中的标记：

http://app.toronto.ca/cc_sr_v1_app/data/edc_eventcal_APR?limit=500

虽然当我更改get请求以包含该链接时：

get('http://app.toronto.ca/cc_sr_v1_app/data/edc_eventcal_APR?limit=500')

它给我以下错误消息：

我相信我没有在我的标记函数中正确解析坐标，但我不确定如何使用JSON数组执行此操作。以下是文件中位置结构的外观：

我的 home.ts 标记地图/标记功能：

displayGoogleMap(){
let latLng = new google.maps.LatLng(43.653908,-79.384293);
let mapOptions = {
center:latLng,
zoom:12,
mapTypeId : google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
}


getMarkers(){
//this.http.get('assets/data/markers.json').map((res)=>res.json()).subscribe(data=>{
  this.http.get('http://app.toronto.ca/cc_sr_v1_app/data/edc_eventcal_APR? limit=500').map((res)=>res.json()).subscribe(data=>{
 this.addMarkersMap(data);

});
}

addMarkersMap(markers){
for(let marker of markers){
  var loc = {lat: marker.latitude , lon: marker.longitude};

  console.log(loc);
  marker = new google.maps.Marker({
  position: loc,
  map: this.map,
  //title:marker.name,
 //label:marker.content

});

}

Answer 1

您正在从标记对象访问不存在的密钥。尝试更改以下功能。

addMarkersMap(markers)
{
    for(let marker of markers)
    {
        var loc = {lat: marker.calEvent.locations[0]['coords'].lat , lon: lat: marker.calEvent.locations[0]['coords'].lng};

        console.log(loc);
        marker = new google.maps.Marker({
        position: loc,
        map: this.map
        });

    }
}