如何在 Angular 和 Jsonp 中使用 HERE Geocoder Autocomplete API？

Posted 2023-03-03

【中文标题】如何在 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 的解决方案，我很好奇。