<html ng-app='appModule'>
<head>
<meta charset="UTF-8">
<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.default.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="kendo-ui-li.css" rel="stylesheet" />
<link href="listView.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.min.js"></script>
<script src="app.js"></script>
<script src="jsonParser.js"></script>
<script src="controller.js"></script>
<title></title>
</head>
<body ng-controller='appController'>
<div class="bg-success center" ng-init="setAddressLists(inputAddress)">
<input kendo-auto-complete
type="text"
ng-model="inputAddress"
placeholder="Please Input Address..."
ng-keyup="inputKeyup($event,inputAddress)"/>
<button class="btn btn-warning margin"
ng-click="setAddressLists(inputAddress)" >
Search
</button>
<div ng-controller="listDetailController" align="center" ng-view></div>
</div>
</body>
</html>
.bg-success.center{
width:80%;
margin: auto;
text-align:center;
}
.bg-success.center div{
margin-top:10px;
margin-left:5px;
margin-right:5px;
margin-bottom:10px;
}
.btn.btn-warning.margin{
margin-top:5px;
margin-left:5px;
margin-right:5px;
margin-bottom:5px;
}
.playlist {
width: 100%;
height: 150px;
background-color: #dff0d8;
border-radius: 5px;
border: 1px solid rgba(0,0,0,.1);
max-height: 200px;
overflow: auto;
position: relative;
text-align: left;
}
.playlist li a{
list-style-type: none;
position: relative;
padding: 6px 5px;
color: #4773ff;
font-size: 1.2em;
cursor: pointer;
}
.playlist li span {
position: absolute;
}
li.hint {
display: block;
padding: 10px;
width: 200px;
background-color: #52aef7;
color: #fff;
}
li.hint:last-child {
border-radius: 4px;
}
li.hint span {
color: #fff;
}
li.placeholder {
background-color: #dceffd;
color: #52aef7;
text-align: right;
}
li.blue{
background-color: #e3eefd;
}
/**
* Created by WillChen on 2014/9/22.
*/
var appConstructor = function(){
var app = angular.module('appModule',['jsonParserModule','controllerModule','kendo.directives']);
app.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/list',{
templateUrl: 'listView.html',
controller: 'listDetailController'
}).when('/details/:detailsID',{
templateUrl: 'detail.html',
controller: 'listDetailController'
}).otherwise({
redirectTo: '/list'
})
}]);
}();
/**
* Created by WillChen on 2014/9/22.
*/
var controllerConstructor = function(){
var app = angular.module('controllerModule',['ngRoute']);
app.controller('appController',function(jsonParserFactory,$scope,$location){
$scope.datas = [];
$scope.inputAddress = "大寮";
$scope.enterKeyCode = 13;
$scope.inputKeyup = function(e,inputAddress){
if (e.keyCode == $scope.enterKeyCode && inputAddress)
$scope.setAddressLists(inputAddress);
}
$scope.setAddressLists = function(inputAddress){
$location.url('/list');
jsonParserFactory.getAddressJson(inputAddress).then(function(collectionJson){
$scope.datas = jsonParserFactory.getAddressDatas(collectionJson);
});
$scope.inputAddress = '';
};
$scope.placeholder = function(element) {
return element.clone().addClass("placeholder").text("drop here");
};
$scope.hint = function(element) {
return element.clone().addClass("hint");
};
});
app.controller('listDetailController',function($scope,$routeParams){
$scope.whichId = parseInt($routeParams.detailsID);
if($routeParams.detailsID > 0)
$scope.prevGuitar = $scope.whichId-1;//前一筆
else
$scope.prevGuitar = $scope.datas.length-1;//小於0則設為最後一筆
$scope.nextGuitar = ($scope.whichId + 1) % $scope.datas.length;
});
}();
/**
* Created by WillChen on 2014/9/22.
*/
var jsonParserConstructor = function(){
var DataClass = function (formatted_address,lat,lng) {
this.formatted_address = formatted_address;
this.lat = lat;
this.lng = lng;
};
var firstParagraph = "http://maps.googleapis.com/maps/api/geocode/json?address=";
var lastParagraph = "&sensor=false&language=zh-TW";
var jsonParserApp = angular.module('jsonParserModule',[]);
jsonParserApp.factory('jsonParserFactory',function($q,$http){
return{
getAddressJson: function(inputAddress){
var url = firstParagraph.concat(inputAddress,lastParagraph);
var deferred = $q.defer();
$http.get(url).success(function(data,status, headers, config){
deferred.resolve(data);
}).error(function (data, status, headers, config){
deferred.reject(data);
});
return deferred.promise;
},
getAddressDatas: function(collectionJson){
var datas = new Array();
angular.forEach(collectionJson.results,function(result){
var data = new DataClass(result.formatted_address,result.geometry.location.lat,result.geometry.location.lng);
datas.push(data);
});
return datas;
}
}
});
}();
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3><span class="label label-default">{{datas[whichId].formatted_address}}</span></h3>
<br />
<img class="img-thumbnail" ng-src="http://maps.google.com/maps/api/staticmap?center={{datas[whichId].formatted_address}}&zoom={{zoom}}&size=800x500&sensor=false&markers=color:blue%7Clabel:S%7C{{datas[whichId].formatted_address}}"/>
<hr/>
<div class="navigation">
<a class="btn btn-info" href="#/details/{{prevGuitar}}"><</a>
<a class="btn btn-info" href="#/details/{{nextGuitar}}">></a>
</div>
</body>
</html>
<div>
<ol class="playlist" kendo-sortable k-placeholder="placeholder" k-hint="hint">
<li ng-repeat="data in datas">
<a id="detail" href="#/details/{{datas.indexOf(data)}}" >
{{data.formatted_address}}
</a>
</li>
</ol>
</div>