基于百度地图JavaScript API，员工住址统计

本文主要是介绍基于百度地图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);