脚本宝典收集整理的这篇文章主要介绍了angularjs 高德地图 选取坐标 bootstrap modal，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
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>以上是脚本宝典为你收集整理的angularjs 高德地图 选取坐标 bootstrap modal全部内容，希望文章能够帮你解决angularjs 高德地图 选取坐标 bootstrap modal所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。