angularjs 高德地图 选取坐标 bootstrap modal

2024年1月28日 161次阅读 来源: Chobits

index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://webapi.amap.com/maps?v=1.3&key=76f167aa351abefe78920b55777f9be6"></script>
</head>
<body>

    <div ng-app="app" ng-controller="ctrl">
        <p>{{point|json}}</p>
        <a class="btn btn-primary" ng-click="show()">click show</a>
    </div>

    <script src="http://cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.4.9/angular-animate.min.js"></script>
    <script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.2.1/ui-bootstrap.min.js"></script>
    <script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.2.1/ui-bootstrap-tpls.min.js"></script>

    <script>
        'use strict';

        var app = angular.module('app', ['ngAnimate', 'ui.bootstrap'])

        app.controller('ctrl', function ($scope, GdMapModalService) {
            $scope.point = {}

            $scope.show = function () {
                GdMapModalService.showModal($scope.point).result.then(function (point) {
                    $scope.point = point
                })
            }
        })
    </script>
    <script src="GdMapModal.js"></script>
</body>
</html>

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: '<div></div>',
            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

<div class="modal-header">
    <h3 class="modal-title">选择坐标</h3>
</div>
<div class="modal-body" ng-init="init()">
    <div class="input-group">
        <input type="text" class="form-control" ng-model="q" ng-keyup="$event.keyCode == 13 && search(q)" placeholder="Search for...">
        <span class="input-group-btn">
            <a class="btn btn-default" ng-click="search(q)">搜索</a>
        </span>
    </div><!-- /input-group -->
    <br />
    <div gd-map point="point" style="height:400px;"></div>
</div>
<div class="modal-footer">
    <button class="btn btn-sm btn-default" type="button" ng-click="cancel()">取消</button>
    <button class="btn btn-sm btn-primary" type="button" ng-click="ok()">确定</button>
</div>
    原文作者：Chobits
    原文地址: https://segmentfault.com/a/1190000006181309
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞