Working example of angular-google-maps search function

后端 未结 4 1963
深忆病人
深忆病人 2021-02-05 07:03

Does anyone have an example of a working search box like the one the angular-google-maps-team is showing under \'search-box\' on this site: https://angular-ui.github.io/angular-

4条回答
  •  無奈伤痛
    2021-02-05 07:35

    html:

    
        
        
    
    

    js controller:

    $scope.map = {
        "center": {
            "latitude": 52.47491894326404,
            "longitude": -1.8684210293371217
        },
        "zoom": 15
    }; //TODO:  set location based on users current gps location 
    $scope.marker = {
        id: 0,
        coords: {
            latitude: 52.47491894326404,
            longitude: -1.8684210293371217
        },
        options: { draggable: true },
        events: {
            dragend: function (marker, eventName, args) {
    
                $scope.marker.options = {
                    draggable: true,
                    labelContent: "lat: " + $scope.marker.coords.latitude + ' ' + 'lon: ' + $scope.marker.coords.longitude,
                    labelAnchor: "100 0",
                    labelClass: "marker-labels"
                };
            }
        }
    };
    var events = {
        places_changed: function (searchBox) {
            var place = searchBox.getPlaces();
            if (!place || place == 'undefined' || place.length == 0) {
                console.log('no place data :(');
                return;
            }
    
            $scope.map = {
                "center": {
                    "latitude": place[0].geometry.location.lat(),
                    "longitude": place[0].geometry.location.lng()
                },
                "zoom": 18
            };
            $scope.marker = {
                id: 0,
                coords: {
                    latitude: place[0].geometry.location.lat(),
                    longitude: place[0].geometry.location.lng()
                }
            };
        }
    };
    $scope.searchbox = { template: 'searchbox.tpl.html', events: events };
    

提交回复
热议问题