将地图定位封装为ng指令
2024-10-19 12:39:31
一、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;
}
}
};
}
最新文章
- 设计模式--观察者模式初探和java Observable模式
- pyhton学习笔记（基础五：数据类型、数据运算）
- 如何将代码托管到GitHub上
- HTML文件基本结构
- 打地鼠游戏ios源码
- 使用IE浏览器下载时候窗口一闪而过
- 关于make: *** No rule to make target `clean'. Stop.的解决
- 《VIM-Adventures攻略》 LEVEL 4、5
- 微渠道发展 BAE交通运输平台和java呼声，微信mysql数据库开发实例 --图文开发教程
- hdu 5040 Instrusive
- BZOJ 4553 Tjoi2016&Heoi2016 序列
- js获取时间戳的三种方法
- c++常用小算法
- Gym - 101617F :Move Away (圆的交点)
- Android数据存储之SharedPreferences使用
- mybatis中动态SQL之trim详解
- ssh-remote-port-forwarding
- LuaFileSystem
- Mysql的唯一性索引unique
- 一种基于SDR实现的被动GSM嗅探