如何在 Angular 和 Jsonp 中使用 HERE Geocoder Autocomplete API?
Posted
技术标签:
【中文标题】如何在 Angular 和 Jsonp 中使用 HERE Geocoder Autocomplete API?【英文标题】:How to use HERE Geocoder Autocomplete API with Angular and Jsonp? 【发布时间】:2021-08-17 14:51:59 【问题描述】:当我调用 HERE Geocoder Autocomplete API 端点时:
https://autocomplete.geocoder.ls.hereapi.com/6.2/suggest.json
?apiKey=YOUR_API_KEY
&query=Pariser+1+Berl
&beginHighlight=<b>
&endHighlight=</b>
正如documentation 中使用 jsonp 所解释的(因为 CORS 错误),我得到了一个奇怪的错误:
Console Error Screenshot
"Error: JSONP injected script did not invoke callback."
"message: "Http failure response for https://autocomplete.geocoder.ls.hereapi.com/6.2/suggest.json?query=23 Rue de &beginHighlight=<b>&endHighlight=</b>&apiKey=****&callback=ng_jsonp_callback_0: 0 JSONP Error"
虽然这是 200 OK:
Network Tab screenshot
Response screenshot
这是我的服务:
@Injectable(
providedIn: 'root'
)
export class LocationService
constructor(
private http: HttpClient,
)
public getSuggestions(query: string): Observable<Suggestion[]>
const options = 'beginHighlight=<b>&endHighlight=</b>';
const url = `$environment.hereDevelopper.suggestionAPIURL?query=$query&$options&apiKey=$environment.hereDevelopper.key`;
return this.http.jsonp<Suggestion[]>(url, 'callback').pipe(map(suggestions => suggestions));
所以我的问题是任何想法或“建议”?
【问题讨论】:
【参考方案1】:所以我最终没有使用 Jsonp。
public getSuggestions(query: string): Observable<Suggestion[]>
const options = 'beginHighlight=<b>&endHighlight=</b>';
const url = `$environment.hereDevelopper.suggestionAPIURL?query=$query&$options&apiKey=$environment.hereDevelopper.key`;
return Observable.create(observer =>
fetch(url)
.then(response => response.json())
.then(suggestions =>
observer.next(suggestions.suggestions);
observer.complete();
)
.catch(err => observer.error(err));
);
我只是使用 fetch 代替,但如果有人有 jsonp 的解决方案,我很好奇。
【讨论】:
以上是关于如何在 Angular 和 Jsonp 中使用 HERE Geocoder Autocomplete API?的主要内容,如果未能解决你的问题,请参考以下文章
Angular 12 Httpclient jsonp - 如何传递自定义回调参数?