当使用带有Angular JS的Mapbox API时，如何自动完成位置搜索

How do you autocomplete location search when using the Mapbox API with Angular JS?

本文关键字：何自动 搜索 位置 API Mapbox Angular JS      更新时间：2023-09-26

我目前正在使用Mapbox API来检索用户在表单中输入的位置。我还使用leaflet-angulardirective，它允许我使用附加到"$scope"的属性来渲染我的地图。

虽然我可以在用户提交后检索一个位置并在地图上张贴一个密码，但我不知道如何像这个例子一样自动完成搜索结果。

这是我的控制器中的一个片段。API终结点中的&autocomplete=true不起作用。

function CreateController ($http, $scope) {
  var vm = this;
  vm.new_location = {};
  vm.locations = [];
  vm.submitLocationForm = function(){
    vm.geocode(vm.addPin);
  }
  //GET LOCATION FROM QUERY
  vm.geocode = function(addMapData) {
    //api from mapbox with access token
    var apiEndpoint = 'https://api.mapbox.com/geocoding/v5/mapbox.places/'+vm.new_location.locationName+'.json?access_token=' + MY_API_KEY + '&autocomplete=true'
   //ajax call to get location data from the zipcode
   $http.get(apiEndpoint)
     .then(function(mapData) {
       var coordinates = mapData.data.features[0].center; //array [long, lat]
       addMapData(coordinates);// callback function that is called only after http call is receives data
     })
  }
  angular.extend($scope, {
      center: {
          autoDiscover: true
      },
      markers: {
      }, //markers is empty b/c users will add markers
      defaults: {
        // minZoom: 2,
        // doubleClickZoom: true,
        markerZoomAnimation: true
      }
    );

   //adding pin
  vm.addPin = function(coordinates){
    vm.pinCounter += 1;
    vm.new_location.pinOrder = vm.pinCounter;
    vm.new_location.longitude = coordinates[0];
    vm.new_location.latitude = coordinates[1];

    $scope.markers[vm.pinCounter] = {
      lat: vm.new_location.latitude,
      lng: vm.new_location.longitude,
      message: vm.new_location.textContent,
      draggable: false,
      focus: true,
      riseOnHover: true,
      zoom: 10
     }
  }

这是表单的HTML：

<form ng-submit="CreateController.submitLocationForm()">
                <div class="form-group">
                    <input type="text" ng-model="CreateController.new_location.locationName" class="form-control" placeholder="Location name" autofocus>
                </div>
                <input type="submit" value="Submit" class="btn btn-block btn-info">
</form>

这是Mapbox文档中可用的代码，但我不确定如何修改它以将其与Angular一起使用：

<html>
     <head>
        <meta charset=utf-8 />
        <title>Geocoding with autocomplete</title>
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
        <script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
        <link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
        <style>
          body { margin:0; padding:0; }
          #map { position:absolute; top:0; bottom:0; width:100%; }
        </style>
        </head>
        <body>
        <div id='map'></div>
        <script>
          L.mapbox.accessToken = '<your access token here>';
          L.mapbox.map('map', 'mapbox.streets')
            .addControl(L.mapbox.geocoderControl('mapbox.places', {
                autocomplete: true
            }));
        </script>
        </body>
    </html>

您似乎正在查看我们的旧Mapbox JS库。一个更新的地图已经发布，使地图更加流畅。文档中有一个带有自动完成功能的地理编码示例，我建议您仔细查看。如果你还有其他问题，我很乐意回答。

相关文章：