ng-admin 和谷歌地图答案

【问题标题】：ng-admin and google mapsng-admin 和谷歌地图
【发布时间】：2016-03-09 15:12:23
【问题描述】：

我正在开发一个使用 ng-admin 作为框架的项目，我对 Angular 等完全陌生。

问题是我需要使用谷歌地图，因为我有一个具有纬度和经度的实体。

但我不知道该怎么做。这是我所做的：

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'))
]);

我不知道是否有一种简单的方法可以做到这一点，或者我是否需要这样做我的方式。

我总是可以开始做一些事情来完成这项工作，但我不想按照我的方式创建一些东西，而不是遵循一种模式（如果存在的话）。

有什么想法吗？

谢谢。

【问题讨论】：

标签： php angularjs laravel ng-admin

【解决方案1】：

这就是我所做的。

从此处包含 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 .. 谢谢你的回答。我下载了这两个文件并添加到我的项目（在 assets/js 文件夹下），但我在 console.log Uncaught ReferenceError: angular is not defined 中收到了这个
我解决了 angular is not defined my bad 的问题。但我看不到正在生成的地图。
这是我放的gstation.creationView() .fields([nga.field('longitude', 'template').template('<geocode geocode="value"></geocode>')]);
您是否在 main.js 中添加了指令？ => myApp.directive('geocode', require('./types/geocode')); /types/ 是我的目录。
它说找不到模块地理编码。我就是这样说 myApp.directive('geocode', require('geocode'));我的脚本位于同一文件夹级别。

【解决方案2】：

只是为了补充@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'
});});

【讨论】：