Question

我想创建一个Ionic应用程序，经理会密切关注他的销售主管。经理应该知道他在移动设备中的所有销售人员位置（在app中的意思）。当经理选择一个用户并点击查找用户时，应该在地图上显示他当前的位置。

我已经完成了使用此

获取用户的当前位置

angular.module('ionic.example', ['ionic'])

.controller('MapCtrl', function($scope, $ionicLoading, $compile) {
var myLatlng = new google.maps.LatLng(43.07493,-89.381388);
  function initialize() {

    var mapOptions = {
      center: myLatlng,
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);

    //Marker + infowindow + angularjs compiled ng-click
    var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
    var compiled = $compile(contentString)($scope);

    var infowindow = new google.maps.InfoWindow({
      content: compiled[0]
    });

    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)'
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });

    $scope.map = map;
  }
  google.maps.event.addDomListener(window, 'load', initialize);

  $scope.centerOnMe = function() {
    if(!$scope.map) {
      return;
    }

    $scope.loading = $ionicLoading.show({
      content: 'Getting current location...',
      showBackdrop: false
    });

    navigator.geolocation.getCurrentPosition(function(pos) {
      $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
      console.log(pos.coords.latitude);
      myLatlng = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude);
      initialize();
      console.log(pos.coords.latitude+","+pos.coords.longitude);
      $scope.loading.hide();
    }, function(error) {
      alert('Unable to get location: ' + error.message);
    });
  };

  $scope.clickTest = function() {
    alert('Example of infowindow with ng-click')
  };

});

Html代码

<html ng-app="ionic.example">
<head>
    <meta charset="utf-8">
    <title>Map</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/index.js"></script>

<!-- google maps javascript -->
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>

</head>
  <body ng-controller="MapCtrl">
    <ion-header-bar class="bar-dark" >
      <h1 class="title">Map</h1>
    </ion-header-bar>
    <ion-content>
      <div id="map" data-tap-disabled="true"></div>
    </ion-content>
    <ion-footer-bar class="bar-dark">
      <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
    </ion-footer-bar>
  </body>
</html>

跟踪当前应用程序用户在离子中的位置

0 个答案: