将地图定位封装为ng指令
一、HTML结构
<div tabindex="-1" class="modal fade in active modal-map" role="dialog">
<div class="modal-dialog modal-md" aria-hidden="true" id="modal_sel_attend_overtime">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" title="关闭" ng-click="mapFun.hideMapOper()" data-dismiss="modal" aria-label="Close">
×
</button>
<h3 class="modal-title text-center" ng-bind="locationMap.lzMapTitle"></h3>
</div>
<div class="modal-body map-outwrap">
<div class="form-control form-control-viewicon map-input">
<i class="pull-right lzicon-map-line"></i>
<input type="text" placeholder="输入关键字选取地点" id="pickerInput" class="form-control-noborder" />
<div id="message" class="message"></div>
</div>
<div id="maplocation-container" class="map-container" tabindex="0"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="mapFun.hideMapOper()">取消</button>
<button type="button" class="btn btn-primary" ng-click="mapFun.Addlocations()">确定</button>
</div>
</div>
</div>
</div>
二、指令逻辑
(function (window, angular, undefined) {
var lzcontrolextended = angular.module('lz.controlextended', ['ng']);
/*======================web地图定位========================*/
*eg：<div lz-Map-Location lz-location-data="attenVar.maplocation"
* lz-callback-mapdata="attOperFun.callBackMapdata(data)></div>
*{
longitude:""//地点经度
latitude:"",//地点纬度
lname："",//地址名称
address："",//详细地址名称
}
* callback-mapdata// 是编辑状态是返回的地图数据
*/ lzcontrolextended.directive("lzMapLocation", function ($modal, $timeout) { return {
restrict: 'AE',
replace: true,
scope: {
locationData: "=lzLocationData",
lzCallbackMapdata: "&lzCallbackMapdata",
lzMapTitle: "@lzMapTitle",
},
template: function (elem, attr) {
var tmp = $(elem.context.outerHTML);
tmp.attr("ng-click", "showMapOPer()");
tmp.removeAttr("lz-map-location").removeAttr("lz-callback-mapdata").removeAttr("lzMapTitle");
return tmp[0].outerHTML;
},
controller: function ($scope, $element) { $scope.locationMap = {
geocoder: "",
map: "",
markerFirst: [],
lzMapTitle:
$scope.lzMapTitle == "" || $scope.lzMapTitle == undefined ? $scope.lzMapTitle = "位置" : $scope.lzMapTitle,
loadJsFile: [//地图加载所需的JS
"https://webapi.amap.com/maps?v=1.4.0&key=987ff0e3b1c29e9ee007a6c2abb1989a&plugin=AMap.DistrictSearch",
"https://webapi.amap.com/demos/js/liteToolbar.js",
"https://cache.amap.com/lbs/static/addToolbar.js"
]
} //显示弹窗
$scope.showMapOPer = function () {
$scope.mapOper = $modal({
scope: $scope,
placement: "left",
templateUrl: $versionManger.getHtml('/Base/PC/View/CommonComtrol/lzMapPosition.html'),
backdrop: "static",
prefixEvent: 'modal',
show: false
}); //加载js
app.asyncjs($scope.locationMap.loadJsFile, function (data) {
//需要在页面有了地图容器之后再去加载JS 这里使用了一个延时
$timeout(function () {
//深拷贝一份数据，在编辑时数据做了修改 不会影响原有数据
$scope.copyData = $scope.deepCopy($scope.locationData);
//当前页面是新建一个位置信息
$scope.mapState = "add";
if ($scope.copyData == null || $scope.copyData == undefined || $scope.copyData == "") {
$scope.copyData = {
address: "",
lname: "",
longitude: "",//地点经度
latitude: "",//地点纬度
proadcode: "",//省
cityadcode: "",//市
districtadcode: "",//县
}
} else {
if ($scope.copyData.address && $scope.copyData.longitude && $scope.copyData.latitude) {
$scope.mapState = "edit";
}
}
//初始化地图的内容
if ($scope.copyData.longitude == "" || $scope.copyData.longitude == undefined && $scope.copyData.latitude == "" || $scope.copyData.latitude == undefined) {
$scope.copyData.longitude = 116.397477;
$scope.copyData.latitude = 39.908692;
}
$scope.locationMap.map = new AMap.Map('maplocation-container', {
resizeEnable: true,
zoom: 11,
center: [$scope.copyData.longitude, $scope.copyData.latitude]
}); //加载地图数据（搜索框联想输入，地理定位及所属城市adcode查询）
AMap.plugin(["AMap.Autocomplete", "AMap.Geocoder", "AMap.DistrictSearch"], function () {
var opts = {
subdistrict: 1, //返回下一级行政区
showbiz: false //最后一级返回街道信息
};
//获取adcode
var district = new AMap.DistrictSearch(opts); //城市，默认：“全国”
var geocoder = new AMap.Geocoder({ city: "北京", radius: 1000, });
var autoOptions = {
input: "pickerInput" //使用联想输入的input的id
};
//销毁联想输入下拉框
if ($(".amap-sug-result").length > 0) {
$(".amap-sug-result").remove();
}
var autocomplete = new AMap.Autocomplete(autoOptions);
//设置下拉框的z-indx 项目需求
$(".amap-sug-result").css("z-index", "1050");
//监听输入框输入地址功能
AMap.event.addListener(autocomplete, "select", function (e) {
if ($scope.locationMap.markerFirst.length != 0) {
$scope.locationMap.markerFirst.setMap();
}
$scope.$apply(function () {
$scope.copyData.address = e.poi.district + e.poi.name;
$scope.copyData.lname = e.poi.name;
$scope.copyData.longitude = e.poi.location.lng;//地点经度
$scope.copyData.latitude = e.poi.location.lat;//地点纬度
});
if (e.poi.location) {
$scope.locationMap.markerFirst.setPosition(e.poi.location);
$scope.locationMap.map.setCenter($scope.locationMap.markerFirst.getPosition());
$scope.locationMap.markerFirst.setMap($scope.locationMap.map);
}
else {
$scope.locationMap.map.setCity(e.poi.adcode);
}
message.innerHTML = "";
});
AMAP.event.addListener(geocoder,"complete",function(data){
var adComInfo=data.regeocode.addressComponent;
if (adComInfo.province) {
district.search(adComInfo.province, function (status, result) {
if (status == 'complete') {
$scope.copyData.proadcode = result.districtList[0].adcode;
}
});
}
//所在市的adcode
if (adComInfo.city) {
district.search(adComInfo.city, function (status, result) {
if (status == 'complete') {
$scope.copyData.cityadcode = result.districtList[0].adcode
}
});
}
//所在县的adcode
if (adComInfo.district) {
district.search(adComInfo.district, function (status, result) {
if (status == 'complete') {
$scope.copyData.districtadcode = result.districtList[0].adcode
}
});
}
});
//加载工具条（放大缩小地图）
AMap.plugin(['AMap.ToolBar'], function () {
var tool = new AMap.ToolBar();
$scope.locationMap.map.addControl(tool);
});
if ($scope.locationMap.markerFirst.length == 0) {
$scope.locationMap.markerFirst = new AMap.Marker({
map: $scope.locationMap.map,
bubble: true
});
}
$scope.locationMap.markerFirst.setMap();
var input = document.getElementById("pickerInput");
var message = document.getElementById("message");
//地图点击
$scope.locationMap.map.on("click", function (e) {
if ($scope.locationMap.markerFirst.length != 0) {
$scope.locationMap.markerFirst.setMap();
}
$scope.locationMap.markerFirst.setPosition(e.lnglat);
$scope.locationMap.map.setCenter([e.lnglat.lng, e.lnglat.lat]);
$scope.locationMap.markerFirst.setMap($scope.locationMap.map);
geocoder.getAddress(e.lnglat, function (status, result) {
if (status == "complete" && result.info === 'OK') {
$scope.$apply(function () {
$scope.callchange(e, result);
message.innerHTML = "";
})
} else {
message.innerHTML = "无法获取地址";
}
});
});
});
//是新增状态
if ($scope.mapState == "add") {
$("#pickerInput").val("");
$scope.copyData = {
address: "",
lname: "",
longitude: "",//地点经度
latitude: "",//地点纬度
proadcode: "",
cityadcode: "",
districtadcode: "",
}
//定位当前位置
$scope.locationMap.map.plugin('AMap.Geolocation', function () {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：无穷大
maximumAge: 0, //定位结果缓存0毫秒，默认：0
convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton: true, //显示定位按钮，默认：true
buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
});
$scope.locationMap.map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});
//解析定位结果
function onComplete(data) {
var lng = data.position.getLng();
var lat = data.position.getLat();
if ($scope.locationMap.markerFirst == 0) {
$scope.locationMap.markerFirst = new AMap.Marker({
map: $scope.locationMap.map,
bubble: true,
position: [lng, lat],
});
}
else {
$scope.locationMap.markerFirst.position = [lng, lat];
}
$scope.locationMap.map.setCenter([lng, lat]);
}
function onError(obj) {
console.log(obj.message);
}
} else {
//地图编辑状态
if ($scope.mapState == "edit") {
if ($scope.copyData && $scope.copyData != "" && typeof ($scope.copyData) != "object" && typeof ($scope.copyData) === "string") {
$scope.copyData = JSON.parse($scope.copyData);
}
$("#pickerInput").val($scope.copyData.address);
if (!$scope.locationMap.markerFirst.length != 0) {
$scope.locationMap.markerFirst = new AMap.Marker({
map: $scope.locationMap.map,
bubble: true,
position: [$scope.copyData.longitude, $scope.copyData.latitude],
});
}
else {
$scope.locationMap.markerFirst.position = [$scope.copyData.longitude, $scope.copyData.latitude];
}
$scope.locationMap.map.setCenter([$scope.copyData.longitude, $scope.copyData.latitude]);
}
}
$scope.callchange = function (e, result) {
$scope.copyData = {
lname: result.regeocode.addressComponent.street + result.regeocode.addressComponent.streetNumber + result.regeocode.addressComponent.township,
address: result.regeocode.formattedAddress,
latitude: e.lnglat.lat,
longitude: e.lnglat.lng,
proadcode: "",
cityadcode: "",
districtadcode: "",
}
$("#pickerInput").val($scope.copyData.address);
}
}, 500);
});
//显示弹窗
$scope.mapOper.$promise.then($scope.mapOper.show);
};
//关闭弹窗
$scope.mapFun = {
hideMapOper: function () {
$scope.mapOper.destroy();
},
//确定（选择好位置信息之后 给页面抛出信息）
Addlocations: function () {
if ($("#pickerInput").val() == "") {
$scope.copyData = {
longitude: "",
latitude: "",
address: "",
lname: "",
proadcode: "",
cityadcode: "",
districtadcode: "",
}
} else {
if ($scope.copyData.address == "" && $("#pickerInput").val() != $scope.copyData.address) {
opacityAlert("当前地址无效，请重新选择！", "glyphicon glyphicon-info-sign");
return false;
}
}
$scope.locationData.address = $scope.copyData.address;
$scope.locationData.lname = $scope.copyData.lname;
$scope.locationData.longitude = $scope.copyData.longitude;
$scope.locationData.latitude = $scope.copyData.latitude;
$scope.locationData.proadcode = $scope.copyData.proadcode;//省编码
$scope.locationData.cityadcode = $scope.copyData.cityadcode;//城市编码
$scope.locationData.districtadcode = $scope.copyData.districtadcode;//县编码
if (typeof $scope.lzCallbackMapdata == "function") {
$scope.lzCallbackMapdata({ data: $scope.locationData });
}
$scope.mapOper.destroy();
}
}
//深克隆
$scope.deepCopy = function (obj) {
var o;
if (typeof obj == "object") {
if (obj === null) {
o = null;
} else {
if (obj instanceof Array) {
o = [];
for (var i = 0, len = obj.length; i < len; i++) {
o.push($scope.deepCopy(obj[i]));
}
} else {
o = {};
for (var j in obj) {
o[j] = $scope.deepCopy(obj[j]);
}
}
}
} else {
o = obj;
}
return o;
};
},
}
});
})(window, angular, undefined);
三、指令使用
1.页面元素使用指令
<button type="button" class="btn btn-sm btn-link"
lz-map-location lz-location-data="maplocation" lz-callback-mapdata="attOperFun.callBackMapdata(data)" lz-map-title="设置考勤地点">
编辑</button>
2.JS
//初始化数据源
$scope.maplocation:{
longitude:"",
latitude:"",
lname:"",
address:"",
proadcode: "",//省
cityadcode: "",//市
districtadcode: "",//县
//编辑处理地图逻辑回调
callBackMapdata: function (data) {
if ((data.address == "")
&& (data.latitude == "")
&& (data.lname == "")
&& (data.longitude == "")) {
return false;
}
if ($scope.attOperVar.LocationModelStatus == 'add') {
var mapData = {
address: data.address,
agid: "",
alid: "",
createtime: "",
isdelete: "",
latitude: data.latitude,
lname: data.lname,
longitude: data.longitude,
oeid: "",
};
$scope.saveAttend.clocklocationlist.push(mapData);
$scope.attOperVar.maplocation = {
longitude: "",
latitude: "",
lname: "",
address: "",
}
} else {
if (data.address && data.lname) {
var item = $scope.saveAttend.clocklocationlist[$scope.attOperVar.LocationModelIndex];
item.longitude = data.longitude;
item.latitude = data.latitude;
item.lname = data.lname;
item.address = data.address;
} else {
$scope.saveAttend.clocklocationlist.splice($scope.attOperVar.LocationModelIndex, 1);
return false;
}
$scope.attOperVar.isShowAttendLocation = false;
}
}
};
}
将地图定位封装为ng指令的更多相关文章
- 百度地图定位SDK 之构想
百度地图定位 前提 从香港旅游回来,心中油然升起一股热血滂湃,激励自己发现市场需求,向创业奋进,朝着梦想前进. 简介 百度Android定位SDK支持Android1.5以及以上设备,提供: 定位功能 ...
- 地图定位CoreLocation框架,地理位置编码与反编码
在现代互联网时代,越来越多的应用,都用到了地图定位功能,在iOS开发中,想要加入这种功能,必须基于两个框架进行开发: 1.Map Kit:用于显示地图, 2.CoreLocation:用于显示地理位置 ...
- Android studio 百度地图开发（2）地图定位
Android studio 百度地图开发(2)地图定位 email:chentravelling@163.com 开发环境:win7 64位,Android Studio,请注意是Android S ...
- ZTMap室内地图定位平台设计方案
1 系统总体设计 1.1 系统概述 基于臻图信息室内GIS地图平台和室内定位平台,通过室内定位设备的部署和信号采集,实现对室内人员和资产的实时定位.路线导航.区域管控告警.客流统计等相关功能. ...
- (十八)WebGIS中清空功能和地图定位功能的设计以及实现
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 当地图中增加了很多元素后,对不同的元素需要进行一定的控制,最 ...
- Android之仿ele地图定位效果
PS:最近项目要求,希望在选择地址的时候能够仿ele来实现定位效果.因此就去做了一下.不过ele使用高德地图实现的,我是用百度地图实现的.没办法,公司说用百度那就用百度的吧.个人觉得高德应该更加的精准 ...
- iOS 获取用户授权的用户隐私保护-地图定位
获取用户授权的用户隐私保护地图定位示例://导入定位框架#import<CoreLocation/CoreLocation.h>@interfaceViewController()< ...
- 关于iOS地图定位中点击设置->隐私->定位服务 闪退问题
iOS8之后,如果应用中用到了地图定位,那么点击设置->隐私->定位服务 再点击该应用有时候会出现闪退问题,其原因是iOS8之后定位中添加了 NSLocationWhenInUseDesc ...
- 百度地图API实现地图定位
1.引用JS: <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0& ...
随机推荐
- --- Android 设置为A2DP 接收器
http://www.it1352.com/88728.html external/bluetooth/bluedroid/include/bt_target.h: * Enable bluetoot ...
- CentOS7虚拟机配置ip地址
首先安装后的虚拟机选NAT模式配置vm的虚拟网络编辑器(vmware中的编辑),NAT模式中查看DHCP的范围,配置子网(写成和电脑一样),在linux中进入/etc/sysconfig/networ ...
- 云栖大会day1 下午
下午参与的是创新创业专场 会议议程是 创新创业专场-2018阿里云创新中心年度盛典 13:30-14:10 阿里双创新征程 李中雨 阿里云创业孵化事业部总经理 14:10-14:40 人货场的渗透与重 ...
- Spark-shell错误：Missing Python executable 'python', defaulting to ...
最近博主因为学习<云计算导论>一课,需要在Windows上搭建Saprk,故在网上找了相关教程搭建,步骤如下: 1. Scala 2.Spark 3.Handoop 但是不管博主怎么修正, ...
- python视频学习笔记3（循环）
一.程序的三大流程 二.while 初始条件设置 —— 通常是重复执行的 计数器 while 条件(判断 计数器 是否达到 目标次数): 条件满足时,做的事情1 条件满足时,做的事情2 条件满足时,做 ...
- oracle数据库用户删除及表空间删除
以system用户登录,查找需要删除的用户: --查找用户 select * from dba_users; --查找工作空间的路径select * from dba_data_files; --删 ...
- promise.then, setTimeout,await执行顺序问题
promise.then VS setTimeout 在chrome和node环境环境中均输出2, 3, 1, 先输出2没什么好说的,3和1顺序让人有些意外 原因: 有一个事件循环,但是任务队列可以有 ...
- Multiple dex files define Lcom/google/gson/internal/Streams$AppendableWriter$CurrentWrite;
开发中引入第三方 aar 时编译同过,运行时出现问题: Multiple dex files define Lcom/google/gson/internal/Streams$AppendableWr ...
- MongoDB主从复制和副本集
MongoDB有主从复制和副本集两种主从复制模式,主从复制最大的问题就是无法自动故障转移,MongoDB副本集解决了主从模式无法自动故障转义的特点,因此是复制的首选.对于简单的主从复制无法自动故障转移 ...
- 基于maven来Spring MVC的环境搭建遇到“坑”
1.注解配置路径问题: 在web.xml中配置spring mvc 路径时, 应该配置如下:classpath:classpath:spring-* 2.jdk版本和Spring MVC版本不一致问题 ...