个人中心
gpt4 book ai didi

google-maps-api-3 - 自动完成自定义结果？

转载 作者：行者123 更新时间：2023-12-04 04:45:19 25 4
gpt4 key购买 nike

我正在开发一个项目，在该项目中我使用 Google Maps API v3 地点(带有自动完成服务)搜索位置。

它运行良好，并允许您从许多不同的国家/地区进行搜索，但我一直希望将一些自定义结果(例如“Mike 地点”)添加到结果 Pane 中(如果有人开始输入“Mike”)。

是否可以将我自己的结果添加到 Google map 地点搜索结果中，或者我应该使用一些 jQuery 自动完成功能并尝试使用我自己的结果添加 Google 结果？

最佳答案

对您来说可能有点晚了，但在决定自己在 Google Maps Autocomplete component for Angular JS 中实现此问题之前，我偶然发现了您的问题。我维护的。希望有人觉得它有帮助。

使用该组件，您可以指定自定义位置结果，这些结果混合到从 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>

重要的部分是确保您的自定义地点结果实际上看起来与真实地点结果相差无几，然后使用 custom-places 将您的结果连接到指令。属性。

关于google-maps-api-3 - 自动完成自定义结果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18290377/

25 4 0
文章推荐： perl - 如何在 Perl 中设置与 DBIx::Class 的多主列 1:n 关系？
文章推荐： tcl - 在带有菜单栏的隐式生成的顶层窗口上调用 'winfo children' 时出现奇怪的结果
文章推荐： terminal - 如何将环境变量 PACKAGE_DIRS 链接到我的本地私有(private)包？
文章推荐： arrays - 不规则数组的矩阵列表
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com