我有一个工作示例,说明如何控制台从外部 API 返回的日志 JSON 数据。我还有一个如何将地理编码数据绘制为 Google 地图上的标记的工作示例。我尝试将它们组合在下面的代码示例中(非常糟糕)。
我不能做的是让两者一起工作,即调用 API 并传递要在地图上绘制的地理编码数据。以下是我的代码示例,用于调用 API、加载 Google 地图并控制台记录地理编码数据(我已删除 Google 密钥[因此请插入您自己的密钥进行测试],但保留了 RapidAPI 密钥):
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Javascript Calling APIs</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=ENTER_GOOGLE_KEY_HERE&callback=initMap&libraries=&v=weekly" defer></script>
<style type="text/css">
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>Test</h1>
<div id="map"></div>
<p id="demo"></p>
<input type="text" placeholder="Type something..." id="myInput">
<button type="button" onclick="getInputValue();">Get Value</button>
<script>
function getInputValue() {
var myHeaders = new Headers();
myHeaders.append("x-rapidapi-key", "169034d4a5msha6f68db3ab64e43p12abf2jsnabff656340a7");
var town = document.getElementById("myInput").value;
var requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
}
var myHeaders = new Headers();
myHeaders.append("x-rapidapi-key", "169034d4a5msha6f68db3ab64e43p12abf2jsnabff656340a7");
const api_url = 'https://wyre-data.p.rapidapi.com/restaurants/town'
var town = document.getElementById("myInput").value;
var requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
缥缈止盈
相关分类