我有一个工作示例，说明如何控制台从外部 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' };
1 回答
缥缈止盈
TA贡献2041条经验 获得超4个赞
要根据 API 的响应在地图上放置标记，请将此代码添加到响应的处理中：
let pot = { // existing code
lat: la,
lng: lo
};
let marker = new google.maps.Marker({
position: pot,
map: map
})
但是，您还需要重新排列代码以在函数getInputValue运行时发出请求（目前它在创建地图之前运行，并且字段的初始值<input>（在发布的代码中为空））。
像这样的东西：
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'
};
function getTown() {
const response = await fetch(api_url + '/' + town, requestOptions);
const data = await response.json();
console.log(data);
let la = data[0].Geocode_Latitude;
let lo = data[0].Geocode_Longitude;
let pot = {
lat: la,
lng: lo
};
let marker = new google.maps.Marker({
position: pot,
map: map
})
console.log(pot);
}
getTown();
}
代码片段：
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'
};
function getTown() {
// use provided response instead of response from server
// const response = await fetch(api_url + '/' + town, requestOptions);
// const data = await response.json();
const data = [{
AddressLine2: "Hallgate Lane",
AddressLine3: "Stalmine",
BusinessName: "MCCOLLS",
Geocode_Latitude: 53.901518,
Geocode_Longitude: -2.953877,
PostCode: "FY6 0LA",
RatingValue: 5,
_id: "5fc96b3a9c728ca91c564485",
}];
console.log(data);
let la = data[0].Geocode_Latitude;
let lo = data[0].Geocode_Longitude;
let pot = {
lat: la,
lng: lo
};
let marker = new google.maps.Marker({
position: pot,
map: map
})
console.log(pot);
}
getTown();
}
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: {
lat: 53.4808,
lng: -2.2426
},
zoom: 7,
});
addMarker(pot);
//add marker function
function addMarker(coords) {
var marker = new google.maps.Marker({
position: coords,
map: map,
icon: 'pin.png'
});
}
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 60%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Simple Markers</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly"
defer
></script>
<!-- jsFiddle will insert css and js -->
</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>
</body>
</html>
添加回答
举报
0/150
提交
取消