Question

我有一个函数尝试使用MapBox自动完成html输入字段。我想在keydown上输入geocoding call，以便用户不必完全输入城市名称。

在app.js中，我使用dotenv，以便可以通过process.env.MAPBOX_TOKEN访问我的API密钥，并且需要Mapbox：

app.js：

require('dotenv').config()
const mbxGeocoding = require('@mapbox/mapbox-sdk/services/geocoding');
const geocodingClient = mbxGeocoding({ accessToken: process.env.MAPBOX_TOKEN });

我现在想使geocodingClient可以被某些客户端jQuery代码访问，以便我可以在geocoder上以keydown形式调用函数<input>。 我该怎么做？

以下内容引发错误geocodingClient is not defined。如何使该服务器端功能可用于客户端代码？

public / js / mapBox.js：

$(document).ready(function () {
    $('#citySearch').on('keyup', function(){
        var location = $(this).val();
        console.log("Location: " + location);

        async function geocoder(location){
            try {
                let response = await geocodingClient
                    .forwardGeocode({
                        query: location,
                        limit: 2
                    })
                    .send();
                console.log(response.body.features[0].place_name)
            } catch(err){
                console.log(err.message);
            }
        }
        geocoder(location)
    })

});

Answer 1

您不能在客户端公开后端。另外，您不应该。

您需要在两端之间进行通信，并假定它们无关。

向服务器发送请求，并处理返回的响应。

$(document).ready(function () {
  $('#citySearch').on('keyup', function(){
    var location = $(this).val();
    console.log("Location: " + location)
    //1.  request to back end with data and deal with response with
    // http libs (ajax, node http/https, axios, etc...)
  })
});



// 2. Reach a route to invoke the async function and respond the result



// 3. this should be at the backend and responding an answer to route that respondes to front.
 async function geocoder(location){
  try {
      let response = await geocodingClient
          .forwardGeocode({
              query: location,
              limit: 2
          })
          .send();
      console.log(response.body.features[0].place_name)
  } catch(err){
      console.log(err.message);
  }
}
// this should be at the backend and responding an answer to route that respondes to front.

Answer 2

您需要做的是在HTML中包含mapbox客户端脚本。

有关详细信息，请参见下面的链接

https://github.com/mapbox/mapbox-sdk-js#pre-bundled-files-on-unpkgcom

如下所示。

<script src="https://unpkg.com/@mapbox/mapbox-sdk/umd/mapbox-sdk.min.js"></script>
<script>
$(document).ready(function () {
  var mapboxClient = mapboxSdk({ accessToken: MY_ACCESS_TOKEN });
  $('#citySearch').on('keyup', function(){
    var location = $(this).val();
    console.log("Location: " + location);
    async function geocoder(location){
        try {
            let response = await mapboxClient.geocoding
                .forwardGeocode({
                    query: location,
                    limit: 2
                })
                .send();
            console.log(response.body.features[0].place_name)
        } catch(err){
            console.log(err.message);
        }
    }
    geocoder();
  })
}); </script>

导出服务器端功能以供客户端使用

2 个答案: