工作示例od Angular google地图搜索地址

Question

我在使用地址选项添加搜索到我的角度谷歌地图代码时遇到问题...

http://jsfiddle.net/lukasz9999/bmp62fan/

   var mapOptions = {
        zoom: 14,
        center: new google.maps.LatLng(30.0000, -98.0000),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

我想我必须以某种方式添加地理编码器，但我不知道如何。

如果某人有一个Angular Google Map的工作示例，那么按地址设置位置就会很棒

谢谢

Answer 1

我建议为此目的使用Autocomplete feature，下面提供了修改后的示例：

  

注意：由于自动填充是Places库的一项功能，因此请务必确保   包括它，例如libraries=places

angular.module('mapsApp', [])
.controller('MapCtrl', function ($scope) {

    var mapOptions = {
        zoom: 10,
        center: new google.maps.LatLng(-33.8688, 151.2195),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }

    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
    $scope.markers = [];
    var infoWindow = new google.maps.InfoWindow();

    //init autocomplete
    var input = document.getElementById('pac-input');
    $scope.map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
    var autocomplete = new google.maps.places.Autocomplete(input);
    //autocomplete.bindTo('bounds', $scope.map);
    autocomplete.addListener('place_changed', function () {
        setPlace();
    });


    var setPlace = function () {
        //infoWindow.close();
        var place = autocomplete.getPlace();
        if (!place.geometry) {
            window.alert("Autocomplete's returned place contains no geometry");
            return;
        }

        // If the place has a geometry, then present it on a map.
        if (place.geometry.viewport) {
            $scope.map.fitBounds(place.geometry.viewport);
        } else {
            $scope.map.setCenter(place.geometry.location);
        }

        createMarker({ lat: place.geometry.location.lat(), lng: place.geometry.location.lng(), address: place.formatted_address });
    }


    var createMarker = function (info) {
        var marker = new google.maps.Marker({
            map: $scope.map,
            position: new google.maps.LatLng(info.lat, info.lng),
            title: info.address
        });
        marker.content = '<div class="infoWindowContent">' + info.address + '</div>';

        google.maps.event.addListener(marker, 'click', function () {
            infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
            infoWindow.open($scope.map, marker);
        });
        $scope.markers.push(marker);
    }


    $scope.openInfoWindow = function (e, selectedMarker) {
        e.preventDefault();
        google.maps.event.trigger(selectedMarker, 'click');
    }

});

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#map {
    height: 600px;
}

.controls {
    margin-top: 10px;
    border: 1px solid transparent;
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 32px;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#pac-input {
    background-color: #fff;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 300px;
}

    #pac-input:focus {
        border-color: #4d90fe;
    }

.pac-container {
    font-family: Roboto;
}

<script src="http://code.angularjs.org/1.2.10/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div ng-app="mapsApp" ng-controller="MapCtrl">
        <input id="pac-input" class="controls" type="text" placeholder="Enter a location">
        <div id="map"></div>
</div>

JSFiddle