Javascript 在使用Mapbox API和Angular JS时，如何自动完成位置搜索？
我目前正在使用Mapbox API检索用户在表单中输入的位置。我还使用了传单角度指令，该指令允许我使用附加到“$scope”的属性渲染贴图 虽然我可以在用户提交后检索一个位置并将pin发布到我的地图上，但我不知道如何自动完成类似于此示例的搜索结果 这是我的控制器的一个片段。API端点中的Javascript 在使用Mapbox API和Angular JS时，如何自动完成位置搜索？,javascript,angularjs,autocomplete,leaflet,mapbox,Javascript,Angularjs,Autocomplete,Leaflet,Mapbox,我目前正在使用Mapbox API检索用户在表单中输入的位置。我还使用了传单角度指令，该指令允许我使用附加到“$scope”的属性渲染贴图 虽然我可以在用户提交后检索一个位置并将pin发布到我的地图上，但我不知道如何自动完成类似于此示例的搜索结果 这是我的控制器的一个片段。API端点中的&autocomplete=true无效 function CreateController ($http, $scope) { var vm = this; vm.new_location = {};
&autocomplete=truefunction 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>
<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>
自动完成地理编码
正文{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
L.mapbox.accessToken=''；
L.mapbox.map（'map'，'mapbox.streets'）
.addControl（L.mapbox.geocoderControl（'mapbox.places'）{
自动完成：正确
}));