Question

我正在尝试动态显示谷歌地图上的位置。这是场景。用户将从选择框中选择一个选项，以便通过＆＃34; City＆＃34;或＆＃34;国家＆＃34;。

地址列表将以列表视图显示。这很好用。当用户点击地址时，它应该显示在Google地图上。我使用ngRoute传递lat和lng作为参数。请在下面找到我的代码：

的index.html

<!doctype html>
<html class="no-js" lang="">
    <head>
        <base href="/"> 
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->

        <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/main.css">

    </head>
    <body ng-app="addLocApp">
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <div class="container">
          <div class="row">
            <div class="col-sm-3 col-md-6 col-lg-3" ng-controller="AddressController">
              <label>Group By: </label>
              <select ng-model="data.select" ng-change="update(data.select)">
                <option value="" disabled selected>Select your option</option>
                <option value="city">City</option>
                <option value="country">Country</option>
              </select>
              <div class="list-group">
                <div class="list-group" ng-repeat="(key, value) in addresses">
                  <label>{{ key }}</label>
                  <ul class="list-unstyled">
                      <li class="list-item" ng-repeat="addrDetail in value">
                        <a href="/detail/{{addrDetail.lat}}/{{addrDetail.lng}}" class="list-group-item">
                            <p>                             
                                {{addrDetail.address}}
                                {{addrDetail.city}}, {{addrDetail.country}}
                                {{addrDetail.postalCode}}
                            </p>
                        </a>
                      </li>
                  </ul>
                </div>
              </div>

            </div>
            <div class="col-sm-9 col-md-6 col-lg-9">
                <div ng-view></div>             
            </div>
          </div>
        </div>

        <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyATjcJN-kXWfGk0_pcVWijVFKnBMuBarXk&language=en" defer"></script>
        <script src="node_modules/underscore/underscore-min.js"></script>       
        <script src="node_modules/angular/angular.min.js"></script>     
        <script src="node_modules/angular-route/angular-route.min.js"></script>             
        <script src="js/service.js"></script>
        <script src="js/main.js"></script>

    </body>
</html>

main.js

var addLocApp = angular.module('addLocApp', ['ngRoute', 'AddressService'])
    .config(function($routeProvider, $locationProvider) {
        $routeProvider.
        when("/", {
          templateUrl: 'map.html',
          controllerAs: 'AddressController'
        }).
        when("/detail/:lat/:lng/", {
          templateUrl: 'map.html',
          controllerAs: 'MapController'
        }).
        otherwise({
          redirectTo: '/'
        });
        $locationProvider.html5Mode(true);
  });

addLocApp.constant('_',
    window._
);

addLocApp.controller('AddressController', function ($scope, LocationData, _) {
    $scope.status;
    $scope.addresses;
    getLocationDetails();

    function getLocationDetails() {
        LocationData.getAddress()
            .success(function (addr) {
                $scope.addresses = addr;
                $scope.orig = angular.copy($scope.addresses);
                console.log($scope.addresses);
            })
            .error(function (error) {
                $scope.status = 'Unable to load customer data: ' + error.message;
            });
    }

    $scope.update = function(val){
        if(val == 'city'){
            $scope.data = angular.copy($scope.orig);
            $scope.addresses = _.groupBy($scope.data, function(d){return d.city});      
        }else{
            $scope.data = angular.copy($scope.orig);
            $scope.addresses = _.groupBy($scope.data, function(d){return d.country});           
        }


    }

});

addLocApp.controller('MapController', function ($scope, $window, $route, $routeParams, _) {

    $window.map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: -34.397,
            lng: 150.644
        },
        zoom: 8
    });

    var param1 = $routeParams.lat;
    var param2 = $routeParams.lng;

    console.log(param1+ " ::: "+ param2);

    var mapOptions = {
                  zoom: 4,
                  center: new google.maps.LatLng(param1,param2),
                  mapTypeId: google.maps.MapTypeId.TERRAIN
              }

              $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions); 
});

map.html

<div ng-controller="MapController" style="height:100%;width:100%;">
    <div id="map"></div>
</div>

我尝试使用高度和宽度为100％的解决方案，调用initMap函数来初始化它，但没有一个工作。

Google地图正在添加到DOM中。我在开发人员工具中检查了这一点。但是地图没有显示在页面上。我也在使用bootstrap。

样式或其他问题是否存在？为什么地图没有显示？

https://my.sonarqube.com

谷歌地图没有出现在AngularJS上

0 个答案: