angularjs 高德地图 选取坐标 bootstrap modal

index.html

        {{point|json}}        click show        '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                })            }        })

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

    选择坐标            搜索    [br]    取消    确定

关键字：angularjs, 高德地图

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！