3

Angular Google Mapsを使用して、検索ボックスを含むマップを取得しています。

検索を「住所」と国 (フランス) に制限しようとしているので、ドキュメントで指定されているように、検索ボックス ディレクティブの「オートコンプリート」オプションを使用したいと思います。

問題はautocomplete:true、コード内のビットが検索を効果的に制限しているにもかかわらず、イベントが発生しないことです (マップとマーカーが更新されません)。しかし、コンソールにエラーはありません。

ただし、コメントアウトまたは削除するautocomplete:trueと、イベントが発生します (マップとマーカーが更新されます) が、検索はフランスと住所に限定されません...

これが私のコードです:

        var events = {
            places_changed:function (searchBox) {
                var place = searchBox.getPlaces();
                if (!place || place == 'undefined' || place.length == 0) {
                    console.log('no place data :(');
                    return;
                }

                // refresh the map
                $scope.map = {
                    center:{
                        latitude:place[0].geometry.location.lat(),
                        longitude:place[0].geometry.location.lng()
                    },
                    zoom:10
                };

                // refresh the marker
                $scope.marker = {
                    id:0,
                    options:{ draggable:false },
                    coords:{
                        latitude:place[0].geometry.location.lat(),
                        longitude:place[0].geometry.location.lng()
                    }
                };

            }
        };

        $scope.searchbox = {
            template:'searchbox.tpl.html',
            events:events,
            options:{
                autocomplete:true,
                types:['address'],
                componentRestrictions:{
                    country:'fr'
                }
            }
        };

そしてhtmlファイルで：

    <div style="height: 500px;">
        <script type="text/ng-template" id="searchbox.tpl.html">
            <input type="text"
                   placeholder="{{'searchbox.google.maps' | text}}"
                   style="width:270px; height:30px;">
        </script>

        <ui-gmap-google-map center='map.center' zoom='map.zoom'>

            <!--SEARCHBOX-->
            <ui-gmap-search-box template="searchbox.template"
                                events="searchbox.events"
                                position="BOTTOM_RIGHT"
                                options="searchbox.options"></ui-gmap-search-box>
            <!--MARKER-->
            <ui-gmap-marker coords="marker.coords" 
                            options="marker.options" 
                            events="marker.events"
                            idkey="marker.id">
            </ui-gmap-marker>

        </ui-gmap-google-map>

    </div>

私は何を間違っていますか？検索と発生したイベントの制限を取得する方法はありますか?

前もって感謝します ！

4

1 に答える 1

7

OK、私はそれを理解したので、他の誰かが動けなくなった場合に備えて、私は自分の質問に答えます!

の場合autocomplete:true、それはplaces_changedandsearchBox.getPlaces()ではなく、place_changedandsearchBox.getPlace()です。そして、場所の配列を取得するのではなく、場所を1 つだけ取得します。

ここに作業コードがあります:

  var events = {
        place_changed:function (searchBox) {
            var place = searchBox.getPlace();
            if (!place || place == 'undefined') {
                console.log('no place data :(');
                return;
            }

            // refresh the map
            $scope.map = {
                center:{
                    latitude:place.geometry.location.lat(),
                    longitude:place.geometry.location.lng()
                },
                zoom:10
            };

            // refresh the marker
            $scope.marker = {
                id:0,
                options:{ draggable:false },
                coords:{
                    latitude:place.geometry.location.lat(),
                    longitude:place.geometry.location.lng()
                }
            };

        }
    };
于 2015-08-17T17:10:47.037 に答える