管理员和 google 地图
ng-admin and google maps
我正在开发一个使用 ng-admin 作为框架的项目,我对 angular 等完全陌生
问题是我需要使用 google 地图,因为我有一个 Entity 和 Latitude 并且经度.
但我不知道我要怎么做。
这是我所做的:
gstation.creationView()
.fields([
nga.field('latitude')
.validation({ required: true }),
nga.field('longitude')
.validation({ required: true }),
nga.field('fk_company', 'reference')
.isDetailLink(false)
.label('Company')
.targetEntity(companies)
.targetField(nga.field('name'))
]);
我不知道是否有简单的方法可以做到这一点,或者我是否需要这样做我的方式。
我总是可以开始做一些事情来完成这项工作,但我不想我的方式,而不是遵循一种模式(如果存在)。
有什么想法吗?
谢谢。
这就是我所做的。
- 包括来自此处的 Angular Google 地图
http://angular-ui.github.io/angular-google-maps
- 为地理代码创建指令。这就是我所做的
https://gist.github.com/vkumarsharma/f019f6116844442c609d
在你的字段中包含指令 config.js
nga.field('user_location', 'template')
.validation({required: true })
.label('Map Location')
.template('<geocode geocode="value"></geocode>'),
您应该会在编辑或创建视图中看到地图,您应该可以在其中设置标记。
补充一下@Vikas的回答..
我可以通过更改为以下内容来完成这项工作:
myApp.directive('geocode', ['$location', function ($location) {
return {
restrict: 'E',
scope: {
geocode: '=bind',
},
link: function($scope, uiGmapIsReady) {
var iLat, iLong;
if ($scope.geocode && $scope.geocode.latitude !== undefined) {
iLat = parseFloat($scope.geocode.latitude);
iLong = parseFloat($scope.geocode.longitude);
} else {
iLat = 19.090555;
iLong = 72.888684;
$scope.geocode = new Object;
$scope.geocode.__type = "GeoPoint";
$scope.geocode.latitude = iLat;
$scope.geocode.longitude = iLong;
}
var maps = { center: { latitude: iLat, longitude: iLong }, zoom: 12 };
$scope.map = maps;
$scope.options = {scrollwheel: false};
$scope.marker = {
id: 0,
coords: {
latitude: iLat,
longitude: iLong
},
options: { draggable: true },
events: {
dragend: function (marker, eventName, args) {
$scope.geocode.latitude = marker.getPosition().lat();
$scope.geocode.longitude = marker.getPosition().lng();
var latlng = {lat: parseFloat($scope.geocode.latitude), lng: parseFloat($scope.geocode.longitude)};
$scope.marker.options = {
draggable: true,
labelContent: $scope.address,
labelAnchor: "100 0",
labelClass: "marker-labels"
};
}
}
};
},
template:
`
<div class="row list-view">
<div class="col-lg-12">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" pan=true refresh="true">
<ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
</ui-gmap-marker>
</ui-gmap-google-map>
</div>
</div>
`
};}]);
myApp.config(function (uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: '',
v: '3',
libraries: 'visualization'
});});
我正在开发一个使用 ng-admin 作为框架的项目,我对 angular 等完全陌生
问题是我需要使用 google 地图,因为我有一个 Entity 和 Latitude 并且经度.
但我不知道我要怎么做。 这是我所做的:
gstation.creationView()
.fields([
nga.field('latitude')
.validation({ required: true }),
nga.field('longitude')
.validation({ required: true }),
nga.field('fk_company', 'reference')
.isDetailLink(false)
.label('Company')
.targetEntity(companies)
.targetField(nga.field('name'))
]);
我不知道是否有简单的方法可以做到这一点,或者我是否需要这样做我的方式。
我总是可以开始做一些事情来完成这项工作,但我不想我的方式,而不是遵循一种模式(如果存在)。
有什么想法吗?
谢谢。
这就是我所做的。
- 包括来自此处的 Angular Google 地图 http://angular-ui.github.io/angular-google-maps
- 为地理代码创建指令。这就是我所做的 https://gist.github.com/vkumarsharma/f019f6116844442c609d
在你的字段中包含指令 config.js
nga.field('user_location', 'template') .validation({required: true }) .label('Map Location') .template('<geocode geocode="value"></geocode>'),
您应该会在编辑或创建视图中看到地图,您应该可以在其中设置标记。
补充一下@Vikas的回答..
我可以通过更改为以下内容来完成这项工作:
myApp.directive('geocode', ['$location', function ($location) {
return {
restrict: 'E',
scope: {
geocode: '=bind',
},
link: function($scope, uiGmapIsReady) {
var iLat, iLong;
if ($scope.geocode && $scope.geocode.latitude !== undefined) {
iLat = parseFloat($scope.geocode.latitude);
iLong = parseFloat($scope.geocode.longitude);
} else {
iLat = 19.090555;
iLong = 72.888684;
$scope.geocode = new Object;
$scope.geocode.__type = "GeoPoint";
$scope.geocode.latitude = iLat;
$scope.geocode.longitude = iLong;
}
var maps = { center: { latitude: iLat, longitude: iLong }, zoom: 12 };
$scope.map = maps;
$scope.options = {scrollwheel: false};
$scope.marker = {
id: 0,
coords: {
latitude: iLat,
longitude: iLong
},
options: { draggable: true },
events: {
dragend: function (marker, eventName, args) {
$scope.geocode.latitude = marker.getPosition().lat();
$scope.geocode.longitude = marker.getPosition().lng();
var latlng = {lat: parseFloat($scope.geocode.latitude), lng: parseFloat($scope.geocode.longitude)};
$scope.marker.options = {
draggable: true,
labelContent: $scope.address,
labelAnchor: "100 0",
labelClass: "marker-labels"
};
}
}
};
},
template:
`
<div class="row list-view">
<div class="col-lg-12">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" pan=true refresh="true">
<ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
</ui-gmap-marker>
</ui-gmap-google-map>
</div>
</div>
`
};}]);
myApp.config(function (uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: '',
v: '3',
libraries: 'visualization'
});});