<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>家庭地址</title>
<style type="text/css">
body,
html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
#l-map {
height: 100%;
width: 100%;
}
#r-result {
width: 100%;
font-size: 14px;
line-height: 20px;
}
.folat {
top: 30px;
left: 30px;
position: absolute;
z-index: 9999;
border: 1px solid, black;
}
</style>
<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>
</head>
<body ng-controller="MyController">
<form enctype="multipart/form-data" class="folat">
<input type="file" id="file" style="margin-top: 30px; width: 180px;" />
<button type="submit" value="submit" ng-click="uploadExcel()">更新</button>
</form>
<input class="folat" type="text" id="chi" style="width:225px;" />
<div id="l-map"></div>
<div id="r-result">
<div id="result"></div>
</div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("l-map");
map.centerAndZoom(new BMap.Point(114.404776, 30.450988), 13);
map.enableScrollWheelZoom(true);
var index = 0;
var myGeo = new BMap.Geocoder();
var myFile;
var adds = [];
var names = [];
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);
if (str[i].__EMPTY_1 == "翟朝武")
adds.push("武汉市洪山区珞桂路");
else
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.404550, 30.450820);
var label = new BMap.Label("公司地址", { offset: new BMap.Size(20, -10) });
label.setStyle({
color: "#f11",
borderColor: "#000",
backgroundColor: "#aaa"
});
addMarker(comAddr, label, 1);
</script>
员工住址地图标注显示.rar （2个子文件） 
研发部通讯信息.xls 29KB
研发部住址-20190612-chenlin.html 5KB资源评论
搁搁搁搁丶浅
- 粉丝: 1
- 资源: 2
最新资源
- C#ASP.NET生物科技公司网站源码 公司企业网站源码数据库 SQL2012源码类型 WebForm
- (源码)基于Ngram模型的中文文本纠错系统.zip
- Allure测试报告工具
- 华为HCIA题库.pdf
- C#MVC+EasyUI+Enterprise Library开发框架源码数据库 SQL2008源码类型 WebForm
- (源码)基于Arduino的直流电机控制系统.zip
- (源码)基于SpringBoot框架的学校工资管理系统.zip
- (源码)基于C++的锻造系统优化计算器.zip
- (源码)基于计算机视觉和Arduino的电机旋转控制系统.zip
- (源码)基于Flutter的移动监控与预警系统.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
