Question

我想对每个用户进行地理定位，我在表用户中添加两个字段纬度和经度

这是我的地图页面 map.html

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

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

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBsiDiIzQjg7U9JYPDVl8hnfZ7MwDcHDHg&signed_in=true&libraries=places&callback=initMap" async defer></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/directives.js"></script>
  </head>

  <body ng-app="starter" ng-controller="MapCtrl">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Map</h1>
    </ion-header-bar>

    <ion-content scroll="false">
      <map on-create="mapCreated(map)"></map>
    </ion-content>

    <ion-footer-bar class="bar-stable">
      <a ng-click="initMap()" class="button button-icon icon ion-navigate"></a>
    </ion-footer-bar>
      <sebm-google-map-marker

              *ngIf="party.location.lat"

              [latitude]="party.location.lat"

              [longitude]="party.location.lng">

      </sebm-google-map-marker>

<script>
function initMap() {
                var position = new google.maps.LatLng({lat: $scope.data.lat , lng: $scope.data.lang });
                var map = new google.maps.Map(document.getElementById('map'), {
                    center: {lat: $scope.data.lat , lng: $scope.data.lang },
                    zoom: 15
                });

                var marker = new google.maps.Marker({
                    position: position,
                    map: map,
                    title: ""
                });

                var input = document.getElementById('map');

                var types = document.getElementById('type-selector');
                map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);

                var autocomplete = new google.maps.places.Autocomplete(input);
                autocomplete.bindTo('bounds', map);

                var infowindow = new google.maps.InfoWindow();
                var marker = new google.maps.Marker({
                    map: map,
                    //anchorPoint: new google.maps.Point(0, -29)
                });

                autocomplete.addListener('place_changed', function () {

                    marker.setVisible(false);
                    var place = autocomplete.getPlace();
                    if (place != undefined) {
                        var lat = place.geometry.location.lat();
                        var lng = place.geometry.location.lng();
                        console.log(place.geometry.location.toString());
                        $('#lat').val(lat);
                        $('#lng').val(lng);
                    }
                    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) {
                        map.fitBounds(place.geometry.viewport);
                    } else {
                        map.setCenter(place.geometry.location);
                        map.setZoom(16);
                    }
                    marker.setPosition(place.geometry.location);
                    marker.setVisible(true);
                });
            }
</script>
  </body>
</html>

这是mapController

Controllers.js

angular.module('starter.controllers', [])

.controller('MapCtrl', function($scope, $ionicLoading) {
  $scope.mapCreated = function(map) {
    $scope.map = map;
  };

  $scope.centerOnMe = function () {
    console.log("Centering");
    if (!$scope.map) {
      return;
    }

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

  };
});

这是我的loginController

loginController.js

var app=angular.module('starter', ['ionic', 'starter.controllers', 'starter.directives', 'ui.router'])
    .config(function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider){
    console.log('test');

    $stateProvider
       .state('map', {
        url: '/map',
        templateUrl: 'map.html',
        controller: 'MapCtrl'
})
 $urlRouterProvider.otherwise('/index');
     });


app.controller('loginCtrl', function ($scope,$http,$location,$state) 
 { 

    $scope.data = {};
    $scope.postLogin = function ()
    {

        var data = 
        {
                email: $scope.data.email,
                password: $scope.data.password
        };

        $http.post("http://localhost/authproject/public/api/auth/login", data)
        .then(
           function(response){
             // success callback
             console.log('success');
             $location.path('/map');
             $scope.data.lang=response.latitude;
             $scope.data.lang=response.langitude;
             console.log('success');

           }, 
           function(response){
             // failure callback

             console.log('error');
             alert('invalid user ');
             //$location.path('/index');

           }
        );



    }

});

我想更正我的代码，以便将标记放在每个用户预定义的位置。

如何在db表中为用户添加地理位置标记？

0 个答案: