基于百度地图JavaScript API,员工住址统计
时间:2019-06-12
本文章向大家介绍基于百度地图JavaScript API,员工住址统计,主要包括基于百度地图JavaScript API,员工住址统计使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
公司一般都有通讯和住址的统计,但是文字化的表格根本就不知道住在哪。
用百度地图就可以轻松解决,
而且公司还经常人员变动,读取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代码:
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) { 29 //document.getElementById("result").innerHTML += index + "、" + add + ":" + point.lng + "," + point.lat + "</br>"; 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 = ''; 79 // 遍历每张表读取 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);
附上下载地址:(附通讯录模板)
(已上传CSDN ,正在审核)
原文地址:https://www.cnblogs.com/baissy/p/11009932.html
- 照虎画猫写自己的Spring
- mybatis 框架实战,实现数据库的增删改查
- CodeSmith 创建Ado.Net自定义模版(一)
- CodeSmith 创建Ado.Net自定义模版(二)
- 一文读懂卷积神经网络CNN
- NVIDIA张建中:自主学习芯片,推动人工智能发展
- CodeSmith 创建Ado.Net自定义模版(三)
- Android注解学习(2)
- Android注解学习(2)
- 机器学习之——距离度量学习
- Enterprise Library Policy Injection Application Block 之三:PIAB的扩展—创建自定义CallHandler(提供Source Code下载)
- CodeSmith 创建Ado.Net自定义模版(四)
- TensorFlow图像分类教程
- Enterprise Library Policy Injection Application Block 之一: PIAB Overview
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 小书MybatisPlus第9篇-常用字段默认值自动填充
- 【42期】盘点那些必问的数据结构算法题之二叉堆
- 小书MybatisPlus第8篇-逻辑删除实现及API细节精讲
- 小书MybatisPlus第7篇-代码生成器的原理精讲及使用方法
- 小书MybatisPlus第6篇-主键生成策略精讲
- Spring Security OAuth2之resource_id配置与验证
- 了解红黑树的起源,理解红黑树的本质
- 在java中进行日期时间比较的4种方法
- 【crossbeam系列】4 crossbeam-channel:加强版channel
- 不想得手指关节炎?帮你提炼IDEA常用代码补全操作
- SpringBoot实现本地存储文件上传及提供HTTP访问服务
- 从 0 到 1 搭建技术中台之 iOS 可视化埋点实践
- 超给力,一键生成数据库文档-数据库表结构逆向工程
- 精讲RestTemplate第6篇-文件上传下载与大文件流式下载
- 【Rust日报】2020-09-12 Apple 使用 Rust 进行底层编程