在Angle 6中使用地理編碼API

Question

public getLatLongs():Promise<any>{


   let assurance:Promise<any>=new Promise<any>(function(resolve,reject){

  let request=new XMLHttpRequest();

 request.onload=function(){

     if(request.status==200){
          resolve(request.response);
  }else{
   reject(new Error("Cannot fetch data"));
 }

};

   request.onerror=function(){
 reject(new Error("Error in map"));
}


let url='/maps/api/geocode/json?address=Ujjain&key=MyKEY';

request.open("GET",url);
request.send();


});



  return assurance;
}

我的proxy.config.json

{
  "/JobsPortal":{
  "target": "http://localhost:3000",
    "secure": false
  },
   "/upload":{
   "target": "http://localhost:3010",
    "secure": false
  },
  "/maps/":{
  "target": "https://maps.googleapis.com",
    "secure": false
  }
 }

我正在使用promise來獲取緯度，在角度6中使用GEOCoding API來獲取時間，但是我遇到了錯誤：

http://localhost:4200/maps/api/geocode/json?address=Ujjain&key='MyKEY' 404 (Not Found)
scheduleTask @ zone.js:2969
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
onScheduleTask @ zone.js:297
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:401
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:255
scheduleMacroTaskWithCurrentZone @ zone.js:1114
(anonymous) @ zone.js:3001
proto.(anonymous function) @ zone.js:1394
(anonymous) @ map.service.ts:36
ZoneAwarePromise @ zone.js:891
push../src/app/services/map.service.ts.MapService.getLatLongs @ map.service.ts:14
push../src/app/map-component/map-component.component.ts.MapComponentComponent.getData @ map-component.component.ts:29
MapComponentComponent @ map-component.component.ts:19
createClass @ core.js:9093
createDirectiveInstance @ core.js:8978
createViewNodes @ core.js:10198
callViewAction @ core.js:10514
execComponentViewsAction @ core.js:10433
createViewNodes @ core.js:10226
createRootView @ core.js:10112
callWithDebugContext @ core.js:11143
debugCreateRootView @ core.js:10630
push../node_modules/@angular/core/fesm5/core.js.ComponentFactory_.create @ core.js:8458
push../node_modules/@angular/core/fesm5/core.js.ComponentFactoryBoundToModule.create @ core.js:3262
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.bootstrap @ core.js:4483
(anonymous) @ core.js:4291
push../node_modules/@angular/core/fesm5/core.js.PlatformRef._moduleDoBootstrap @ core.js:4291
(anonymous) @ core.js:4257
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:3757
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
(anonymous) @ zone.js:872
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:3748
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:862
ZoneAwarePromise.then @ zone.js:962
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4286
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:76
0 @ main.ts:12
__webpack_require__ @ bootstrap:76
checkDeferredModules @ bootstrap:43
webpackJsonpCallback @ bootstrap:30
(anonymous) @ main.js:1
map-component.component.ts:34 Error: Cannot fetch data
    at XMLHttpRequest.request.onload [as __zone_symbol__ON_PROPERTYload] (map.service.ts:23)
    at XMLHttpRequest.wrapFn (zone.js:1188)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3748)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:496)
    at invokeTask (zone.js:1540)
    at XMLHttpRequest.globalZoneAwareCallback (zone.js:1566)

Ps =我啟用了有效的密鑰並啟用了Google地理編碼API，當我在瀏覽器中經過網址時收到json，但使用Google API時卻收到404錯誤。 其他代理工作正常，請幫幫我

Answer 1

您的proxy.config.json文件未更新您的URL

let url='/maps/api/geocode/json?address=Ujjain&key=MyKEY';

然后只有它獲取默認路徑（本地主機路徑）

http://localhost:4200/maps/api/geocode/json?address=Ujjain&key='MyKEY' 

只需嘗試改變這一點，

let url='https://maps.googleapis.com/maps/api/geocode/json?address=Ujjain&key=MyKEY'

確保您必須在MyKEY中傳遞實際密鑰。

我相信問題出在道路上，請嘗試一下。希望它能解決您的問題。 讓我們嘗試一次，讓我知道是否有任何錯誤。