来自 Json 文件的离子显示谷歌地图结果答案

【问题标题】：Ionic Show Google Map Result from Json file来自 Json 文件的离子显示谷歌地图结果
【发布时间】：2015-06-16 18:32:58
【问题描述】：

我正在做作业。有一种情况是用户搜索公司名称等。然后用户单击结果--> 显示公司详细信息，其中包括地图。我想知道如何将 json 文件的位置数据（很长的列表，我只是在下面粘贴一个简短的）传递给视图。另外，如何在显示的地图上做标记。我使用了 setCenter 但得到了错误的结果。感谢您提前回复。在这里附上js、html和css。

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

.run(function($ionicPlatform) {

  $ionicPlatform.ready(function() {
    
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.controller('MapController', function($scope, $ionicLoading) {
 
    google.maps.event.addDomListener(window, 'load', function(pos) {
        var myLatlng = new google.maps.LatLng(40.785091, -73.968285);
 
        var mapOptions = {
            center: myLatlng,
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
 
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);
 
        $scope.map = map;
    });
 
});


/// There is no place anymore, so I paste the Json file here:

{
   "data": [{

        "office_id": "1",
        "name": "Demo Office",
        "shortname":"demo",
        "address": "somewhere",
        "latitude": "64.49815080",
        "longitude": "28.76102540",
        "active": "1",
        "locked": "0"
    }, {
        "office_id": "2",
        "name": "Health Center",
        "shortname":"health",
        "address": "Thailand",
        "latitude": "61.19945900",
        "longitude": "25.65550300",
        "active": "1",
        "locked": "0"
   
    }],
    "status": 0,
    "message": "some message",
    "messageID": 0
}

/* Empty. Add your own CSS if you like */
.scroll {
    height: 100%;
}
 
#map {
    width: 100%;
    height: 100%;
}

<!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="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="cordova.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">
        <ion-pane>
            <ion-header-bar class="bar-stable">
                <h1 class="title">Ionic Blank Starter</h1>
            </ion-header-bar>

              <ion-content ng-controller="MapController">
                  <div id="map" data-tap-disabled="true"></div>
                  
              </ion-content>
                         
        </ion-pane>
        <script src="http://maps.googleapis.com/maps/api/js?key=[my api key]&sensor=true"></script>
    </body>
</html>

【问题讨论】：

如何访问JSON对象mkyong.com/javascript/how-to-access-json-object-in-javascript

标签： json angularjs google-maps ionic

【解决方案1】：

前几天我问了一个类似的谷歌地图相关问题，滚动到答案，看看我是如何实现 json 数据的。任何问题让我知道。

AngularJS Google Map with Multiple Markers

【讨论】：