Question

我是angularjs的新手。但我试图从我的mongo数据库中提取信息。然后我想根据我提取的信息在谷歌地图中创建标记。

我在我的控制台中遇到的主要错误是“错误：[ng：areq]参数'mapCtrl'不是函数，未定义。我有一种感觉就是Ionic正在做的事情不是

angular.module('app.controllers', ['ionic']) 


// service to to pull info from db to app

var par_markers = angular.module("get_markers", []);

par_markers.service("markers_service", function ($http, $markers)
        {

    var csus_markers = $markers.csus_markers();
    $http.get('http://localhost:8080/api/concretetours').then(function(marker_data)
    {
    csus_markers=resolve.(marker_data);  from previous examples 
    console.log(marker_data);
    });
    this.DBNAME = function ()
    {
        return csus_markers.marker_results;
    }

        })

//-----------------------------------------------------------------     
.controller('mapCtrl', ['$scope', '$ionicSideMenuDelegate', '$ionicLoading', '$compile', '$ionicPopup', '$http', 'markers_service', function ($scope, $ionicSideMenuDelegate, $ionicLoading, $compile, $ionicPopup, $http, markers_service) {

    $ionicSideMenuDelegate.canDragContent(false);

    var myLatlng = new google.maps.LatLng(38.5602, -121.4241);

    var mapOptions = {
        center: myLatlng,
        zoom: 18,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoomControl: true,
        disableDefaultUI: true
    };

    var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);

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


    // loop to populate map with markers
    var marker_results = marker_service.getmarkers();
    marker_results.then(function(marker_data)
            {
            $scope.marker = marker_data;


    console.log($scope.marker);

$scope.marker.ForEach(function(item){
                var latLng = new google.maps.LatLng(item.latitude, item.longitude);
                var marker = new google.maps.Marker({
                   position: latLng,
                   title: item.name,
                   map: map
                });

                /*
                for (var i = 0; i < lateralSites.length; i++) {
                    var lateral = lateralSites[i];
                var marker = new google.maps.Marker({
                    position: {
                        lat: lateral[1],
                        lng: lateral[2]
                    }, */

                })
}]);

我很确定我尝试创建标记的方式也不正确。

我的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">
    <title></title>
    <!--<link href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic" rel="stylesheet" type="text/css">-->
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
   <!-- <link href="lib/ionic-material/dist/ionic.material.min.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="lib/ionic-material/dist/ionic.material.min.js"></script>-->
    <!-- cordova script (this will be a 404 during development) -->
    <!--  <script src="cordova.js"></script>  * does really do anything... cordova.js doesnt exist -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>

</head>

<body ng-app="app">
    <ion-nav-view></ion-nav-view>
</body>

</html>

这是我的mongo db中的一个项目的示例：

{
    "_id": {
        "$oid": "563c467b8823faf009eba006"
    },
    "idno": "51",
    "tourtype": "connections",
    "title": "Roof Truss",
    "icon": "img/steelicon.png",
    "rating": 3.5,
    "lat": 38.56203,
    "lon": -121.42672,
    "description": "Steel and Connections Roof Truss in Yosemite Hall",
    "technical": "Technical information",
    "pics": [
        {
            "src": "img/rooftruss-1.jpg"
        },
        {
            "src": "img/rooftruss-2.jpg"
        },
        {
            "src": "img/rooftruss-3.jpg"
        },
        {
            "src": "img/rooftruss-4.jpg"
        }
    ]
}

我的主要问题是我正在尝试从数据库中取出标记，我想确保我正确地编写循环以创建我需要的所有标记

尝试使用角度js创建谷歌地图标记时出错

0 个答案: