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

I am currently using the Mapbox API to retrieve the location that the user enters in the form. I'm also using the leaflet-angular-directive that allows me to render my map with the attributes that are attached to my '$scope'.

While I can retrieve a location and post a pin to my map after the user submits, I can't figure out how to autoplete the search results similar to this example.

Here is a snippet from my controller. The &autoplete=true in my API endpoint does not work.

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 = '.places/'+vm.new_location.locationName+'.json?access_token=' + MY_API_KEY + '&autoplete=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
     }

  }

Here's the HTML for the form:

<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>

This is the code that's available on the Mapbox documentation, but I'm unsure how to modify it in order to use it with Angular:

<html>
     <head>
        <meta charset=utf-8 />
        <title>Geocoding with autoplete</title>
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
        <script src='.js/v2.4.0/mapbox.js'></script>
        <link href='.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', {
                autoplete: true
            }));
        </script>
        </body>
    </html>

While I can retrieve a location and post a pin to my map after the user submits, I can't figure out how to autoplete the search results similar to this example.

Here is a snippet from my controller. The &autoplete=true in my API endpoint does not work.

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./geocoding/v5/mapbox.places/'+vm.new_location.locationName+'.json?access_token=' + MY_API_KEY + '&autoplete=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
     }

  }

Here's the HTML for the form:

<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>

This is the code that's available on the Mapbox documentation, but I'm unsure how to modify it in order to use it with Angular:

<html>
     <head>
        <meta charset=utf-8 />
        <title>Geocoding with autoplete</title>
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
        <script src='https://api.mapbox./mapbox.js/v2.4.0/mapbox.js'></script>
        <link href='https://api.mapbox./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', {
                autoplete: true
            }));
        </script>
        </body>
    </html>

Share Improve this question asked Apr 13, 2016 at 18:01 socialpiranha 1721 gold badge1 silver badge10 bronze badges

I found a workaround solution to this problem. I used angular-js.in/vsgoogleautoplete in order to plete this, but it seems like this should be doable using Mapbox. – socialpiranha Commented Apr 13, 2016 at 18:36

Add a ment |

1 Answer 1

Sorted by: Reset to default 2

You seem to be looking at our old Mapbox JS library. A newer one has been released that makes maps much more fluid. The documentation has a geocoder example with autoplete, i'd remend looking over. If you have any additional question, i'll be glad to answer them.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745387004a4625484.html

javascript - How do you autocomplete location search when using the Mapbox API with Angular JS? - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - How do you autocomplete location search when using the Mapbox API with Angular JS? - Stack Overflow

1 Answer 1

相关推荐