angularjs 高德地图 选取坐标 bootstrap modal

index.html

    
    
    
    
    



    

        
{{point|json}}
        click show
    

    
    
    
    

    
    

---

GdMapModal.js

(function (angular) {

    function controller($scope, $uibModalInstance, point) {

        $scope.init = function () {
            $scope.point = point
        }

        $scope.$on('map-click', function (event, e) {
            $scope.point = {
                lat: e.lnglat.getLat(),
                lng: e.lnglat.getLng()
            }
            //$scope.$apply()
        })

        $scope.search = function (q) {
            AMap.service(["AMap.PlaceSearch"], function () {
                var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
                    pageSize: 1,
                    pageIndex: 1,
                    //city: "010", //城市
                    //map: self.map,
                    //panel: "panel"
                })

                //关键字查询
                placeSearch.search(q, function (status, result) {
                    //TODO : 按照自己需求处理查询结果
                    var poiList = result.poiList

                    if (poiList.count > 0) {
                        var p = poiList.pois[0]
                        $scope.$broadcast('setCenter', [p.location.lng, p.location.lat])
                    }
                })
            })
        }

        $scope.ok = function () {
            $uibModalInstance.close($scope.point);
        }

        $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
        }
    }

    var app = angular.module('app');

    app.factory('GdMapModalService', ['$uibModal', function ($uibModal) {
        var service = {};

        service.showModal = function (point) {

            var modalInstance = $uibModal.open({
                //animation: false,
                templateUrl: 'GdMapModal.html',
                controller: ['$scope', '$uibModalInstance', 'point', controller],
                size: 'lg',
                resolve: {
                    point: function () {
                        return point;
                    },
                }
            });

            return modalInstance;
        }

        return service
    }]);

    app.directive('gdMap', function ($timeout) {
        return {
            restrict: 'EA',
            scope: {
                point: '=?',
            },
            template: '
',
            replace: true,
            link: function (scope, el, attr, ctrl) {

                scope.map = new AMap.Map(el[0], {
                    resizeEnable: true,
                    zoom: 12,
                })

                if (scope.point.lat && scope.point.lng) {
                    var center = [scope.point.lng, scope.point.lat]
                    scope.map.setCenter(center)
                    scope.marker = new AMap.Marker({ map: scope.map })
                    scope.marker.setPosition(center)
                }

                scope.map.on('click', function (e) {
                    scope.$emit('map-click', e)

                    if (!scope.marker) {
                        scope.marker = new AMap.Marker({ map: scope.map })
                    }

                    scope.marker.setPosition([e.lnglat.getLng(), e.lnglat.getLat()])
                })

                scope.$on('setCenter', function (event, center) {
                    if (!scope.map) return
                    scope.map.setCenter(center)
                })
            }
        }
    })

})(window.angular)

GdMapModal.html

    
选择坐标


    

        
        
            搜索
        
    

    

    



    取消
    确定