AGM-Map InvalidValueError & Uncaught

Question

我目前正在构建一个项目使用角度谷歌地图，我从一个API的细节，并显示在地图上。webservice对象的形式为“selectedLoc”：

{"LOCATIONID":"OFF","LOCATIONNAME":"MAIN OFFICE","BRANCH_TYPE":"SHOWROOM","LATITUDE":"6.2267","LONGITUDE":"5.5823","AREANAME”:”CITY","ROAD_NBR”:"100","BLOCK_NBR":"200","INSURANCE_POLICY_NBR":"123456","INSURANCE_EXPIRY_DATE":"2022-12-12T00:00:00.000Z","INSURED_AMOUNT":4500000,"REMARKS":"DEMO UNITS","CONTACT_PERSON”:"JOHN","CONTACT_NUMBER”:"12345678","NATURE_OF_STOCK":"STOCK","FIXTURE_AND_FITTINGS":"300000"}

我试图将它显示在地图上，我的component.ts文件中的代码是：

    latitude = this.selectedLoc.LATITUDE;
    longitude = this.selectedLoc.LONGITUDE;
    mapType = 'satellite';
    zoom = 12;

我的component.html文件中的代码是：

<agm-map [latitude]='latitude' [longitude]='longitude' [mapTypeId]='mapType' [zoom]='zoom’>
  <agm-marker [latitude]='selectedLoc.LATITUDE' [longitude]='selectedLoc.LONGITUDE' [label]='selectedLoc.LOCATIONID'></agm-marker>
</agm-map>

我无法看到地图，而是在控制台上看到一个黑色屏幕和一个错误：

InvalidValueError: setCenter:不是有有限坐标的LatLng或LatLngLiteral :在属性中，lat:不是数字

当我试图放大或缩小地图时，我会发现另一个错误：

Uncaught :无法读取空属性“缩放”

我不知道我哪里出了问题。

Answer 1

尝尝这个

latitude: number = parseFloat(this.selectedLoc.LATITUDE);
longitude: number = parseFloat(this.selectedLoc.LONGITUDE);

和

<agm-map [latitude]='latitude' [longitude]='longitude' [mapTypeId]='mapType' [zoom]='zoom’>
  <agm-marker [latitude]='latitude' [longitude]='longitude' [label]='selectedLoc.LOCATIONID'></agm-marker>
</agm-map>