第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

如何獲取 API 的 JSON 結(jié)果并在地圖上繪制

如何獲取 API 的 JSON 結(jié)果并在地圖上繪制

牛魔王的故事 2023-11-02 17:04:53
我有一個(gè)工作示例，說(shuō)明如何控制臺(tái)從外部 API 返回的日志 JSON 數(shù)據(jù)。我還有一個(gè)如何將地理編碼數(shù)據(jù)繪制為 Google 地圖上的標(biāo)記的工作示例。我嘗試將它們組合在下面的代碼示例中（非常糟糕）。我不能做的是讓兩者一起工作，即調(diào)用 API 并傳遞要在地圖上繪制的地理編碼數(shù)據(jù)。以下是我的代碼示例，用于調(diào)用 API、加載 Google 地圖并控制臺(tái)記錄地理編碼數(shù)據(jù)（我已刪除 Google 密鑰[因此請(qǐng)插入您自己的密鑰進(jìn)行測(cè)試]，但保留了 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貢獻(xiàn)2041條經(jīng)驗(yàn) 獲得超4個(gè)贊

要根據(jù) API 的響應(yīng)在地圖上放置標(biāo)記，請(qǐng)將此代碼添加到響應(yīng)的處理中：


let pot = { // existing code

  lat: la,

  lng: lo

};

let marker = new google.maps.Marker({

  position: pot,

  map: map

}) 

但是，您還需要重新排列代碼以在函數(shù)getInputValue運(yùn)行時(shí)發(fā)出請(qǐng)求（目前它在創(chuàng)建地圖之前運(yùn)行，并且字段的初始值<input>（在發(fā)布的代碼中為空））。


像這樣的東西：


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();


}

概念證明小提琴

https://img1.sycdn.imooc.com/6543667000019b0806570412.jpg

代碼片段：


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>


查看完整回答
反對(duì) 回復(fù) 2023-11-02
  • 1 回答
  • 0 關(guān)注
  • 132 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)