Google maps api 3 自动完成自定义结果?
我正在做一个项目,我正在使用Google Maps API v3 places(自动完成服务)搜索位置 它工作得很好,允许您从许多不同的国家搜索,我曾经希望在结果窗格中添加一些自定义结果(例如“Mikes place”)(如果有人开始键入“Mike”)Google maps api 3 自动完成自定义结果?,google-maps-api-3,autocomplete,Google Maps Api 3,Autocomplete,我正在做一个项目,我正在使用Google Maps API v3 places(自动完成服务)搜索位置 它工作得很好,允许您从许多不同的国家搜索,我曾经希望在结果窗格中添加一些自定义结果(例如“Mikes place”)(如果有人开始键入“Mike”) 是否可以将我自己的结果添加到Google Maps places搜索结果中,或者我应该使用一些jQuery自动完成功能并尝试使用我自己的结果添加Google结果 对你来说可能有点晚了,但在我决定自己用一种我坚持的方式来实现这一点之前,我偶然发现了
是否可以将我自己的结果添加到Google Maps places搜索结果中,或者我应该使用一些jQuery自动完成功能并尝试使用我自己的结果添加Google结果 对你来说可能有点晚了,但在我决定自己用一种我坚持的方式来实现这一点之前,我偶然发现了你的问题。希望有人觉得它有帮助 使用该组件,您可以指定自定义放置结果,这些结果将混合到从AutocompleteService返回的结果中 下面是一个工作示例:
<!DOCTYPE html>
<html lang="en" ng-app="example">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Injecting Custom Place Predictions</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="../src/autocomplete.css">
<!-- Required dependencies -->
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="lib/underscore/underscore.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-touch/angular-touch.js"></script>
<!-- Google Places Autocomplete directive -->
<script src="../src/autocomplete.js"></script>
<script>
angular.module('example', ['google.places'])
// Setup a basic controller
.controller('MainCtrl', function ($scope) {
$scope.place = null;
$scope.myPlaces = [
toGooglePlacesResult({
label: 'International Airport - T1, Sydney, New South Wales',
address: {
street: 'International Airport - T1',
suburb: 'Sydney',
state: 'NSW'
},
location: { latitude: -33.936722, longitude: 151.164266 }
}),
toGooglePlacesResult({
label: 'Domestic Airport - T2, Sydney, New South Wales',
address: {
street: 'Domestic Airport - T2',
suburb: 'Sydney',
state: 'NSW'
},
location: { latitude: -33.933617, longitude: 151.181630 }
}),
toGooglePlacesResult({
label: 'Domestic Airport - T3, Sydney, New South Wales',
address: {
street: 'Domestic Airport - T3',
suburb: 'Sydney',
state: 'NSW'
},
location: { latitude: -33.933076, longitude: 151.181270 }
})
];
function toGooglePlacesResult(config) {
return {
formatted_address: config.label,
address_components: [
{
long_name: config.address.street,
short_name : config.address.street,
types: [ 'route' ]
},
{
long_name: config.address.suburb,
short_name: config.address.suburb,
types: [ 'locality' ]
},
{
long_name: config.address.state,
short_name: config.address.state,
types: [ 'administrative_area_level_1' ]
}
],
geometry: {
location: {
lat: function () { return config.location.latitude },
lng: function () { return config.location.longitude }
}
}
};
}
});
</script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Injecting Custom Place Predictions</h1>
<form class="form">
<input class="form-control" g-places-autocomplete custom-places="myPlaces" ng-model="place"/>
</form>
<h5>Result:</h5>
<pre>{{place | json}}</pre>
</div>
</div>
</div>
</body>
</html>
注入自定义位置预测
angular.module('example',['google.places']))
//设置基本控制器
.controller('MainCtrl',函数($scope){
$scope.place=null;
$scope.myPlaces=[
多哥地方结果({
标签:“新南威尔士州悉尼国际机场T1”,
地址:{
街道:“国际机场-T1”,
郊区:“悉尼”,
州:“新南威尔士州”
},
地点:{纬度:-33.936722,经度:151.164266}
}),
多哥地方结果({
标签:“新南威尔士州悉尼T2国内机场”,
地址:{
街道:“国内机场-T2”,
郊区:“悉尼”,
州:“新南威尔士州”
},
地点:{纬度:-33.933617,经度:151.181630}
}),
多哥地方结果({
标签:“新南威尔士州悉尼T3国内机场”,
地址:{
街道:“国内机场-T3”,
郊区:“悉尼”,
州:“新南威尔士州”
},
地点:{纬度:-33.933076,经度:151.181270}
})
];
函数ToLoglePlacesResult(配置){
返回{
格式化的_地址:config.label,
地址和组件:[
{
long_name:config.address.street,
缩写:config.address.street,
类型:[“路由”]
},
{
long_name:config.address.com,
短名称:config.address.com,
类型:[“位置”]
},
{
long_name:config.address.state,
短名称:config.address.state,
类型:['行政区\级别\ 1']
}
],
几何图形:{
地点:{
lat:function(){return config.location.latitude},
lng:function(){return config.location.longitude}
}
}
};
}
});
注入自定义位置预测
结果:
{{place | json}}
重要的部分是确保您的自定义位置结果实际上看起来与真实位置结果非常相似,然后使用
custom places
属性将结果连接到指令。如何使用您的库