angular模态框位置_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

选择坐标

搜索

取消

确定