基于百度地图JavaScript API,员工住址统计
公司一般都有通讯和住址的统计,但是文字化的表格根本就不知道住在哪。
用百度地图就可以轻松解决,
而且公司还经常人员变动,读取excel中的内容,就不用每次还要更改地图文件了。
在遇到需要聚餐在地图中标点时,在文本框中输入地址,多个地址需要用英文逗号“,”分割。
为了单个文件的方便,存放更雅观这里引用的全是网络地址:
下面是全部js代码:
1 // 百度地图API功能 2 var map = new BMap.Map("l-map"); 3 map.centerAndZoom(new BMap.Point(114.413121, 30.480956), 13); 4 map.enableScrollWheelZoom(true); 5 var index = 0; 6 var myGeo = new BMap.Geocoder(); 7 var adds = []; 8 var names = []; 9 var myFile; 10 function change() { 11 console.log("a"); 12 var adds = document.getElementById("chi").value.split(','); 13 for (i in adds) { 14 geocodeSearch("", adds[i], 1) 15 } 16 }; 17 18 function bdGEO(flag) { 19 for (var i = 0; i < adds.length; i++) { 20 var name = names[i]; 21 var add = adds[i]; 22 geocodeSearch(name, add, flag); 23 } 24 } 25 function geocodeSearch(name, add, flag) { 26 console.log(add); 27 myGeo.getPoint(add, function (point) { 28 if (point) { 30 var address = new BMap.Point(point.lng, point.lat); 31 addMarker(address, new BMap.Label(name + "\n" + add, { offset: new BMap.Size(20, -10) }), flag); 32 } 33 }, "武汉市"); 34 } 35 36 function getMyIcon(flag) { 37 var path = "http://api.map.baidu.com/img/markers.png"; 38 var p; 39 if (flag == 0) 40 p = { 41 offset: new BMap.Size(10, 25), // 指定定位位置 42 43 imageOffset: new BMap.Size(0, -275) // 设置图片偏移 44 }; 45 else if (flag == 1) 46 p = { 47 offset: new BMap.Size(10, 25), // 指定定位位置 48 49 imageOffset: new BMap.Size(0, -300) // 设置图片偏移 50 }; 51 52 53 return myIcon = new BMap.Icon(path, new BMap.Size(20, 25), p); 54 55 } 56 // 编写自定义函数,创建标注 57 function addMarker(point, label, flag) { 58 var marker = new BMap.Marker(point, { icon: getMyIcon(flag) }); 59 map.addOverlay(marker); 60 marker.setLabel(label); 61 } 62 63 (function () { 64 var app = angular.module('myApp', []); 65 app.controller('MyController', ['$scope', myController]); 66 67 var excelJsonObj = []; 68 function myController($scope) { 69 $scope.uploadExcel = function () { 70 myFile = document.getElementById('file'); 71 var input = myFile; 72 var reader = new FileReader(); 73 reader.onload = function () { 74 var fileData = reader.result; 75 var workbook = XLSX.read(fileData, { type: 'binary' }); 76 77 // 表格的表格范围,可用于判断表头是否数量是否正确 78 var fromTo = ''; 80 var sheet0 = workbook.Sheets[workbook.SheetNames[0]];//sheet0代表excel表格中的第一页 81 var str = XLSX.utils.sheet_to_json(sheet0);//利用接口实现转换。 82 names = []; 83 adds = []; 84 for (var i in str) { 85 names.push(str[i].__EMPTY_1); 86 adds.push(str[i].__EMPTY_3); 87 } 88 bdGEO(0); 89 90 }; 91 //获取地图上所有的覆盖物 92 var allOverlay = map.getOverlays(); 93 for (var i = 1; i < allOverlay.length; i++) { 94 if (allOverlay[i].toString() == "[object Marker]") { 95 // if (allOverlay[i].getPosition().lng == longitude(待删除标注的经度) && allOverlay[i].getPosition().lat == latitude(待删除标注纬度)) { 96 // map.removeOverlay(allOverlay[i]); 97 // } 98 map.removeOverlay(allOverlay[i]); 99 console.log(allOverlay[i]); 100 } 101 } 102 if (document.getElementById("chi").value != "") { 103 change(); 104 } 105 if (myFile.value != "") 106 reader.readAsBinaryString(input.files[0]); 107 108 }; 109 } 110 })(); 111 112 var comAddr = new BMap.Point(114.413121, 30.480956); 113 var label = new BMap.Label("公司地址", { offset: new BMap.Size(20, -10) }); 114 label.setStyle({ 115 color: "#f11", 116 borderColor: "#000", 117 backgroundColor: "#aaa" 118 }); 119 addMarker(comAddr, label, 1);
附上源码下载地址:(含通讯录模板)
https://download.csdn.net/download/qq_38415250/11239541
转载请注明出处。