0
Kullanıcının formda girdiği konumu almak için şu anda Mapbox API'sini kullanıyorum. Ayrıca, haritamı '$ kapsamına' eklenmiş olan özelliklerle oluşturmamı sağlayan yaprakçık-açısal yönerge'u kullanıyorum.Mapbox API'sini Angular JS ile kullanırken otomatik olarak yer aramalarını nasıl tamamlıyorsunuz?
Kullanıcı gönderdikten sonra bir konum alabilir ve haritama pin gönderebilirken, bu örneğe benzer arama sonuçlarını otomatik olarak nasıl tamamlayacağımı anlayamıyorum.
Denetleyicimden bir snippet. API son noktadaki &autocomplete=true çalışmıyor. İşte
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
}
}
<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>
Bu the code that's available on the Mapbox documentation, ama Eğik ile kullanmak için bunu nasıl değiştirileceğini emin değilim:
<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>
Bu soruna geçici bir çözüm buldum. Bunu tamamlamak için http://angular-js.in/vsgoogleautocomplete/ adresini kullandım, ancak Mapbox kullanılarak yapılabilecek gibi görünüyor. – socialpiranha