基于百度地图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代码：

 // 百度地图API功能

     var map = new BMap.Map("l-map");

     map.centerAndZoom(new BMap.Point(114.413121, 30.480956), 13);

     map.enableScrollWheelZoom(true);

     var index = 0;

     var myGeo = new BMap.Geocoder();

     var adds = [];

     var names = [];

     var myFile;

     function change() {

         console.log("a");

         var adds = document.getElementById("chi").value.split(',');

         for (i in adds) {

             geocodeSearch("", adds[i], 1)

         }

     };

     function bdGEO(flag) {

         for (var i = 0; i < adds.length; i++) {

             var name = names[i];

             var add = adds[i];

             geocodeSearch(name, add, flag);

         }

     }

     function geocodeSearch(name, add, flag) {

         console.log(add);

         myGeo.getPoint(add, function (point) {

             if (point) {

                 var address = new BMap.Point(point.lng, point.lat);

                 addMarker(address, new BMap.Label(name + "\n" + add, { offset: new BMap.Size(20, -10) }), flag);

             }

         }, "武汉市");

     }

     function getMyIcon(flag) {

         var path = "http://api.map.baidu.com/img/markers.png";

         var p;

         if (flag == 0)

             p = {

                 offset: new BMap.Size(10, 25), // 指定定位位置  

                 imageOffset: new BMap.Size(0, -275) // 设置图片偏移

             };

         else if (flag == 1)

             p = {

                 offset: new BMap.Size(10, 25), // 指定定位位置  

                 imageOffset: new BMap.Size(0, -300) // 设置图片偏移

             };

         return myIcon = new BMap.Icon(path, new BMap.Size(20, 25), p);

     }

     // 编写自定义函数,创建标注

     function addMarker(point, label, flag) {

         var marker = new BMap.Marker(point, { icon: getMyIcon(flag) });

         map.addOverlay(marker);

         marker.setLabel(label);

     }

     (function () {

         var app = angular.module('myApp', []);

         app.controller('MyController', ['$scope', myController]);

         var excelJsonObj = [];

         function myController($scope) {

             $scope.uploadExcel = function () {

                 myFile = document.getElementById('file');

                 var input = myFile;

                 var reader = new FileReader();

                 reader.onload = function () {

                     var fileData = reader.result;

                     var workbook = XLSX.read(fileData, { type: 'binary' });

                     // 表格的表格范围，可用于判断表头是否数量是否正确

                     var fromTo = '';

                     var sheet0 = workbook.Sheets[workbook.SheetNames[0]];//sheet0代表excel表格中的第一页

                     var str = XLSX.utils.sheet_to_json(sheet0);//利用接口实现转换。

                     names = [];

                     adds = [];

                     for (var i in str) {

                         names.push(str[i].__EMPTY_1);

                         adds.push(str[i].__EMPTY_3);

                     }

                     bdGEO(0);

                 };

                 //获取地图上所有的覆盖物

                 var allOverlay = map.getOverlays();

                 for (var i = 1; i < allOverlay.length; i++) {

                     if (allOverlay[i].toString() == "[object Marker]") {

                         // if (allOverlay[i].getPosition().lng == longitude(待删除标注的经度) && allOverlay[i].getPosition().lat == latitude(待删除标注纬度)) {

                         //     map.removeOverlay(allOverlay[i]);

                         // }

                         map.removeOverlay(allOverlay[i]);

                         console.log(allOverlay[i]);

                     }

                 }

                 if (document.getElementById("chi").value != "") {

                     change();

                 }

                 if (myFile.value != "")

                     reader.readAsBinaryString(input.files[0]);

             };

         }

     })();

     var comAddr = new BMap.Point(114.413121, 30.480956);

     var label = new BMap.Label("公司地址", { offset: new BMap.Size(20, -10) });

     label.setStyle({

         color: "#f11",

         borderColor: "#000",

         backgroundColor: "#aaa"

     });

     addMarker(comAddr, label, 1);