公司一般都有通讯和住址的统计, 但是文字化的表格根本就不知道住在哪.
用百度地图就可以轻松解决,
而且公司还经常人员变动, 读取 Excel 中的内容, 就不用每次还要更改地图文件了.
在遇到需要聚餐在地图中标点时, 在文本框中输入地址, 多个地址需要用英文逗号 "," 分割.
为了单个文件的方便, 存放更雅观这里引用的全是网络地址:
- <script src="http://api.map.baidu.com/getscript?v=2.0&ak=0FpGbjF167Qrie7ovGlCQ8Ma0dDv8iwf">
- </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) {
- //document.getElementById("result").innerhtml += index + "," + add + ":" + point.lng + "," + point.lat + "</br>";
- 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);
附上下载地址:(附通讯录模板)
来源: http://www.bubuko.com/infodetail-3090255.html