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
选择坐标