AGM 地图 InvalidValueError & Uncaught TypeError

Question

我目前正在使用 Angular Google 地图构建一个项目，我从 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: not a LatLng or LatLngLiteral with finite coordinates: in property lat: not a number

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

Uncaught TypeError: Cannot read property 'zoom' of null

我不确定我哪里错了。

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>

AGM 地图 InvalidValueError & Uncaught TypeError

AGM-Map InvalidValueError & Uncaught TypeError

angular

angular-google-maps