0
私はLocationオブジェクトを含むViewModel LocCusCountVM.csを作ってきたように：無効センター：{} - AngularJS
public JsonResult GetMarkerData(int locationID)
{
using (DbEntities dc = new DbEntities())
{
Location l = null;
l = dc.Locations.Where(a => a.LocationID.Equals(locationID)).FirstOrDefault();
var c = (from lo in db.Locations
join lt in db.LocationTbls on lo.CustLoc equals lt.Id
join ct in db.CustomerTbls on lo.CustLoc equals ct.Location
where ct.Location == (from lo in db.Locations where lo.LocationID==locationID select lo.CustLoc).FirstOrDefault()
select ct.Location).Count();
LocCusCountVM LocCus = new LocCusCountVM();
LocCus.locations = l;
LocCus.count = c;
LocCus.locations.LocationID = locationID;
return new JsonResult
{
Data = LocCus,
JsonRequestBehavior = JsonRequestBehavior.AllowGet
};
}
}
public class LocCusCountVM
{
public Location locations { get; set; }
public int count { get; set; }
}
public partial class Location
{
public int LocationID { get; set; }
public string Title { get; set; }
public string Lat { get; set; }
public string Long { get; set; }
public string Address { get; set; }
public string ImagePath { get; set; }
public Nullable<int> CustLoc { get; set; }
}
その後、私のIndex.cshtmlとCustForm.jsは、次のとおりです。 -
.controller('mapsController', function($scope, $http)
{
//this is default coordinates for the map when it loads for first time
$scope.map =
{
center:
{
latitude: 28.6315,
longitude: 77.2167
},
zoom: 16
}
$scope.markers = [];
$scope.locations = [];
//to get all the locations from the server
$http.get('/home/GetAllLocation').then(function(data)
{
$scope.locations = data.data;
}, function()
{
alert('Error');
});
//service that gets makers info from server
$scope.ShowLocation = function(locationID)
{
$http.get('/home/GetMarkerData',
{
params:
{
locationID: locationID
}
}).then(function(data)
{
$scope.markers = [];
$scope.markers.push
({
id: data.data.LocationID,
coords:
{
latitude: data.data.Lat,
longitude: data.data.Long
},
title: data.data.title, //title of the makers
address: data.data.Address, //Address of the makers
image: data.data.ImagePath //image --optional
});
//set map focus to center
$scope.map.center.latitude = data.data.Lat;
$scope.map.center.longitude = data.data.Long;
}, function()
{
alert('Error'); //shows error if connection lost or error occurs
});
}
//Show or Hide marker on map using options passes here
$scope.windowOptions =
{
show: true
};
})
//mapsController Ends Here<!--Div for mapsController Upload Started-->
<div class="col-md-12">
<div ng-controller="mapsController">
<!--It displays the markers links-->
<div class="locations">
<ul>
<li class="text-success" ng-repeat="l in locations" ng-click="ShowLocation(l.LocationID)"><a href="#">{{l.Title}}</a></li>
</ul>
</div>
<hr />
<div class="maps">
<!-- Add directive code (gmap directive) for show map and markers-->
<ui-gmap-google-map style="box-shadow:2px 2px 2px 2px lightgrey" center="map.center" zoom="map.zoom">
<ui-gmap-marker ng-repeat="marker in markers" coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
<ui-gmap-window options="windowOptions" show="windowOptions.show">
<div style="max-width:200px">
<div class="header"><strong>{{marker.title}}</strong></div>
<div id="mapcontent">
<p>
<img ng-src="{{marker.image}}" style="width:200px; height:100px" />
<div>{{marker.address}}</div>
<b>No of Customers:</b>
</p>
</div>
</div>
</ui-gmap-window>
</ui-gmap-marker>
</ui-gmap-google-map>
</div>
</div>
</div>
<!--Div for mapsController Upload Ended-->は、しかし、私はこれを実行するたびに、私はエラーを取得する： - Invalid center for newValue: {}あなたはキャメルケースに自分の属性名を変更する必要が