使用 MAPBOX 搜索附近的餐厅/美食地点答案

【问题标题】：Nearby Restaurant/food places search using MAPBOX使用 MAPBOX 搜索附近的餐厅/美食地点
【发布时间】：2020-11-02 03:23:23
【问题描述】：

我是初学者，对 API 了解不多。我想为附近的餐馆搜索和一堆其他不相关的东西制作一个网络应用程序。我正在使用 laravel 框架。我在 MAPBOX 中设计了一个自定义地图。我不能附上任何代码，因为除了一点点研究之外我什么都没做。我添加了指向 MAP GL JS 的链接，并且地图显示正常。我希望用户能够在文本中添加他们的位置或打开他们的位置服务。地图应显示该位置附近的食物场所。我不知道是否足够彻底，因为这是我的第二个问题。任何可以帮助我入门的帮助都将不胜感激。

<div id='map' style='margin-top:10px;width: 100%; height: 90vh'></div>

Javascript

mapboxgl.accessToken = 'MYTOKEN';

var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/MYSTYLE',
    center: [74.3587, 31.5204], // starting position
    zoom: 14 // starting zoom
});

// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());

map.addControl(
    new MapboxDirections({
        accessToken: mapboxgl.accessToken
    }),
    'top-left'
);
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/hadia125/ckcjiyik542ig1iqnvfrjjexf',
    center: [74.3587, 31.5204], // starting position
    zoom: 14 // starting zoom
});

map.addControl(
    new MapboxDirections({
        accessToken: mapboxgl.accessToken
    }),
    'top-left'
);

【问题讨论】：

标签： javascript html css laravel mapbox

【解决方案1】：

我知道这是一岁了，但出于教育目的，您可以使用 mapbox GL JS 构建一个商店定位器，该定位器可用于定位餐馆、图书馆等任何东西。在此示例中，您将能够从侧边栏浏览所有商店位置，然后单击特定商店以查看更多信息。在地图上选择一个标记将在侧边栏突出显示选定的商店。请参阅文档以获取有关如何实现此目的的完整指南和教程。

css

  * {
    box-sizing: border-box;
  }
  
  body {
    color: #404040;
    font: 400 15px/22px 'Source Sans Pro', 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
  }

  h1 {
    font-size: 22px;
    margin: 0;
    font-weight: 400;
    line-height: 20px;
    padding: 20px 2px;
  }

  a {
    color: #404040;
    text-decoration: none;
  }

  a:hover {
    color: #101010;
  }

  /* The page is split between map and sidebar - the sidebar gets 1/3, map
  gets 2/3 of the page. You can adjust this to your personal liking. */
  .sidebar {
    position: absolute;
    width: 33.3333%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    border-right: 1px solid rgba(0, 0, 0, 0.25);
  }

  .map {
    position: absolute;
    left: 33.3333%;
    width: 66.6666%;
    top: 0;
    bottom: 0;
  }

  .heading {
    background: #fff;
    border-bottom: 1px solid #eee;
    height: 60px;
    line-height: 60px;
    padding: 0 10px;
  }

html

<div class='sidebar'>
  <div class='heading'>
    <h1>Our locations</h1>
  </div>
  <div id='listings' class='listings'></div>
</div>
<div id="map" class="map"></div>

【讨论】：