AGM-Map InvalidValueError & Uncaught TypeError答案

【问题标题】：AGM-Map InvalidValueError & Uncaught TypeErrorAGM-Map InvalidValueError & Uncaught TypeError
【发布时间】：2020-08-02 23:12:08
【问题描述】：

我目前正在使用 Angular Google Maps 构建一个项目，我从 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: 不是数字

当我尝试放大或缩小地图时，我收到另一个错误消息：

未捕获的类型错误：无法读取 null 的属性“缩放”

我不确定我哪里出错了。

【问题讨论】：

标签： angular angular-google-maps

【解决方案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>

【讨论】：

别忘了添加这个 css - agm-map { height: 100%; }
恐怕问题仍然存在。我在控制台中遇到了同样的两个错误。
@Nooh Ahamad 再试一次。我编辑了答案。添加了 parseFloat()。立即尝试