基於百度地圖JavaScript API，員工住址統計

公司通常都有通信和住址的統計，可是文字化的表格根本就不知道住在哪。

用百度地圖就能夠輕鬆解決，

並且公司還常常人員變更，讀取excel中的內容，就不用每次還要更改地圖文件了。

在遇到須要聚餐在地圖中標點時，在文本框中輸入地址，多個地址須要用英文逗號「,」分割。

 

爲了單個文件的方便，存放更雅觀這裏引用的全是網絡地址：

　

<script src="http://api.map.baidu.com/getscript?v=2.0&ak=你的密鑰"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/xlsx/0.14.3/xlsx.full.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.7.4/angular.min.js"></script>

 

下面是所有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

 

轉載請註明出處。