如何自動填寫我的當前地址到搜索框

Question

問候，我是新來的IONIC，現在我遇到了問題。我正在嘗試在我的應用中添加Google地圖方向服務。當我在搜索框中輸入地址時，應用程序現在將跳轉到位置A，但是我想要的是當我第一次打開應用程序時，搜索框A將自動獲取我的位置地址並填充文本框A中的地址。

TaxiServices.html

<div class="bar bar-header bar-dark item item-button-left"> 
    <!--<a class="button icon-left ion-chevron-left button-clear button-dark" ng-click="st.link()">Home Page</a>--> 
<button class="button button-clear" ng-click="ts.link()"> 
<i class="icon ion-arrow-left-c"></i> 
    </button> 
    <h1 class="title">Taxi Services TEST</h1> 
</div> 
<ion-view ng-app="taxiservice" ng-controller="MapController"> 
    <ion-content class="has-footer has-header" scroll="false"> 
    <div class="container"> 
     <div class="titlebar"> 
     <div class="preorder"> 
     <!--http://jsfiddle.net/ucmL2/--> 
     <ion-checkbox ng-model="ModelData.Animals">Pre-Order</ion-checkbox> 
     <div class="form-group" ng-show="ModelData.Animals"> 
     <form action="action_page.php"> 
      Date & Time : 
      <input type="datetime-local" class="datetime"> 
     </form> 
     </div> 
    </div> 
    <div class="places"> 
     <input id="origin-input" class="controls" type="text" 
      placeholder="Enter an origin location"> 

     <input id="destination-input" class="controls" type="text" 
      placeholder="Enter a destination location"> 
    </div> 
    </div> 
    <div id="map" data-tap-disabled="true"></div> 

    <div class="fare has-footer"> 
    <h3>Estimated Fare: </h3> 
    </div> 
</div> 

taxiservice-ctrl.js

var map; 
(function() { 
    'use strict'; 

    angular 
.module('taxiservice.ctrl', []) 
.controller('TaxiServiceCtrl', ['$scope', '$ionicPopup', '$timeout', '$rootScope', '$interval', '$window', '$ionicLoading', 
    function ($scope, $ionicPopup, $timeout,$rootScope, $interval, $window, $ionicLoading) { 
    //variables 
    var self = this; 
    self.link = link; 


    function link() { 
     $window.location.href = "../../js/ServiceMenu/index.html"; 
    } 


    $scope.showPopup = function() { 
     var alertPopup = $ionicPopup.alert({ 
     title: 'Good News!', 
     template: 'Yay! We have found you a driver!' 
     }); 
     alertPopup.then(function(res) { 
     $window.location.href = "../../js/TaxiFound/index.html"; 
     }); 
    }; 

    }]) 

.controller('MapController', function ($scope, $ionicLoading) { 

    google.maps.event.addDomListener(window, 'load', function() { 
    var origin_place_id = null; 
    var destination_place_id = null; 
    var travel_mode = google.maps.TravelMode.WALKING; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     mapTypeControl: false, 
     center: {lat: -33.8688, lng: 151.2195}, 
     zoom: 17 
    }); 

    navigator.geolocation.getCurrentPosition(function (pos) { 
     map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)); 
     var myLocation = new google.maps.Marker({ 
     position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude), 
     map: map, 
     title: "My Location" 

     }); 
    }); 

    var directionsService = new google.maps.DirectionsService; 
    var directionsDisplay = new google.maps.DirectionsRenderer; 
    directionsDisplay.setMap(map); 

    var origin_input = document.getElementById('origin-input'); 
    var destination_input = document.getElementById('destination-input'); 


    var options = { 
     types: ['geocode'], 
     componentRestrictions: {country: 'my'} 
    }; 

    map.controls[google.maps.ControlPosition.TOP_LEFT].push(origin_input); 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(destination_input); 


    var origin_autocomplete = new google.maps.places.Autocomplete(origin_input, options); 
    origin_autocomplete.bindTo('bounds', map); 
    var destination_autocomplete = 
     new google.maps.places.Autocomplete(destination_input, options); 
    destination_autocomplete.bindTo('bounds', map); 

    // Sets a listener on a radio button to change the filter type on Places 
    // Autocomplete. 


    function expandViewportToFitPlace(map, place) { 
     if (place.geometry.viewport) { 
     map.fitBounds(place.geometry.viewport); 
     } else { 
     map.setCenter(place.geometry.location); 
     map.setZoom(17); 
     } 
    } 

    origin_autocomplete.addListener('place_changed', function() { 
     var place = origin_autocomplete.getPlace(); 
     if (!place.geometry) { 
     window.alert("Autocomplete's returned place contains no geometry"); 
     return; 
     } 
     expandViewportToFitPlace(map, place); 

     // If the place has a geometry, store its place ID and route if we have 
     // the other place ID 
     origin_place_id = place.place_id; 
     route(origin_place_id, destination_place_id, travel_mode, 
     directionsService, directionsDisplay); 
    }); 

    destination_autocomplete.addListener('place_changed', function() { 
     var place = destination_autocomplete.getPlace(); 
     if (!place.geometry) { 
     window.alert("Autocomplete's returned place contains no geometry"); 
     return; 
     } 
     expandViewportToFitPlace(map, place); 

     // If the place has a geometry, store its place ID and route if we have 
     // the other place ID 
     destination_place_id = place.place_id; 
     route(origin_place_id, destination_place_id, travel_mode, 
     directionsService, directionsDisplay); 
    }); 

    function route(origin_place_id, destination_place_id, travel_mode, 
        directionsService, directionsDisplay) { 
     if (!origin_place_id || !destination_place_id) { 
     return; 
     } 
     directionsService.route({ 
     origin: {'placeId': origin_place_id}, 
     destination: {'placeId': destination_place_id}, 
     travelMode: travel_mode 
     }, function(response, status) { 
     if (status === google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
     } else { 
      window.alert('Directions request failed due to ' + status); 
     } 
     }); 
    } 

    }); 

}); 
})(); 

的index.html

個

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' *; style-src 'self' 'unsafe-inline' *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *"> 
    <title></title> 

    <link href="../../css/ionic.app.css" rel="stylesheet"> 

    <script src="../../lib/angular/angular.js"></script> 

    <script src="../../lib/angular-animate/angular-animate.js"></script> 
    <script src="../../lib/angular-sanitize/angular-sanitize.js"></script> 
    <script src="../../lib/angular-ui-router/release/angular-ui-router.js"></script> 
    <script src="../../lib/ionic/js/ionic.js"></script> 
    <script src="../../lib/ionic/js/ionic-angular.js"></script> 
</head> 
    <body ng-app="taxiservice"> 

<ion-nav-view> 
</ion-nav-view> 

    <script src="https://maps.googleapis.com/maps/api/js?&callback=&libraries=places&sensor=false"> 
</script> 
    <script src="app.js"></script> 
    <script src="map.js"></script> 
    <script src="content/taxiservice-ctrl.js"></script> 
</body> 
</html> 

app.js

var app = angular 
    .module('taxiservice', [ 
    'ionic', 
    'taxiservice.ctrl' 
    ]) 

     .run(function($ionicPlatform,$timeout) { 
    $ionicPlatform.ready(function() { 
    // Hide the accessory bar by default (remove this to show the accessory bar  above the keyboard 
    // for form inputs) 
    if(window.cordova && window.cordova.plugins.Keyboard) { 
    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
    } 
    if(window.StatusBar) { 
    StatusBar.styleDefault(); 
     } 

    }); 
    }) 
    .config(function($ionicConfigProvider,$stateProvider,$urlRouterProvider) { 

$stateProvider 
    .state('app', { 
    url: '/app', 
    templateUrl: 'content/TaxiService.html', 
    controller:'TaxiServiceCtrl as ts' 
    }); 

// if none of the above states are matched, use this as the fallback 
$urlRouterProvider.otherwise('/app'); 

    }); 

我一直在努力與這個問題很長的時間，請大家幫忙！

Answer 1

查看反向地理編碼示例。您可以使用您已有的位置檢索地址，然後添加標記。 https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/geocoder

Answer 2

一個很好的插件，我在我的應用程序進行補谷歌地圖自動完成使用是

https://github.com/israelidanny/ion-google-place

易於安裝，反向包括地理編碼，大模板

定製很容易

好運