今天遇到一共要求做一个点击查询数据，要求显示数据，并且点击事件触发百度地图显示对应数据并且按距离排序问题，如图
原图
修改图
这里主要分为几个问题？
1.这个表格如何设置内部字段高度显示
2.数据显示太多右下角不够存放怎么办？
3.如何拿取地图距离并且排序由小到大
3.点击事件触发如何传递Object类数据，因为我原始代码是拼接的html，不能传递Object如何解决
1.首先看第一个问题和第二个问题处理，表格排版问题
<div class="shop">
<table summary="门店">
<thead>
<tr>
<th>门店名称</th>
<th>门店电话</th>
<th>距离</th>
<th>授权门店</th>
</tr>
</thead>
<tbody id="provinceData"></tbody>
</table>
</div>
css样式，这里特别注意：
1.如何让表单内部显示合理，就要设置内边距 padding: 10px 5px; 10px表示内容与表单上下内边距 5px就是左右内边距。
2.overflow-y: auto 这auto ：如果溢出框，则应该提供滚动机制，这里就为多余的数据做到滚动条。
.shop{
width:100%;
margin-top: 400px;
height: 420px;
overflow-y: auto
}
.shop table{
width: 100%;
font-size: 13px;
color:white;
vertical-align:middle;
text-align:center;
}
.shop tr td{
padding: 10px 5px;
cursor: pointer;
}
如何设置数据显示地图距离？并且排序其实不是很难
if(!!provinceData){
for(index in provinceData){
var wd = provinceData[index];
var point = new BMap.Point(wd.longitude, wd.latitude);
var info = getInfo(wd);
addCertMarker(point,info);
var pois = [
globalPoint,
point
];
var polyline =new BMap.Polyline(pois, {
enableClicking: false,//是否响应点击事件，默认为true
strokeWeight:'3',//折线的宽度，以像素为单位
strokeOpacity: 1,//折线的透明度，取值范围0 - 1
strokeColor:"#0000FF" //折线颜色
});
map.addOverlay(polyline); //增加折线
var opts = {
position : point, // 指定文本标注所在的地理位置
offset : new BMap.Size(0, 0) //设置文本偏移量
}
let distance = (map.getDistance(globalPoint,point)/1000).toFixed(2);
provinceData[index].distance = distance;
var label = new BMap.Label("距离:"+distance+' 千米。',opts);
map.addOverlay(label);
}
provinceData.sort(function (a, b){
return a.distance - b.distance;
});
这里只要看这两个：
两地距离：
var label = new BMap.Label("距离:"+distance+' 千米。',opts);
数组数数据按距离排序（由小到大）：
provinceData.sort(function (a, b){
return a.distance - b.distance;
});
如何触发数据显示呢？这里有个问题我是拼接的html，Object并不能传递参数怎么办？
1.设置一个全局的参数，用于接收请求返回参数
2.点击事件传递数组数据下标，用于接收
全局参数： var provinceData = [];
数组下标
var html = "";
for(index in provinceData){
var wd = provinceData[index];
html+= "<tr onclick='figures("+ index +")'>"
+'<td>'+wd.name+'</td>'
+'<td>'+wd.mobile+'</td>'
+'<td>'+wd.distance+'</td>'
+'<td>'+getWdLevel(wd.level)+'</td>'
+'</tr>'
}
$('#provinceData').html(html);
通过figures方法传递数组下标，然后触发事件就可以完成。
触发百度地图事件：
map.closeInfoWindow();
map.openInfoWindow(infoWindow,point); //开启信息窗口
map.addOverlay(marker);
原始代码：
<%@ page language="java" isErrorPage="true" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="basePath" value="${pageContext.request.contextPath}" scope="application"/>
<!DOCTYPE HTML>
<head>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<title>客户位置分布图</title>
<%-- <%@include file="/WEB-INF/inc/common.jsp"%> --%>
<link rel="stylesheet" rev="stylesheet" href="${basePath}/res/css/map.css" type="text/css" />
<link rel="stylesheet" rev="stylesheet" href="${basePath}/res/css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" rev="stylesheet" href="${basePath}/res/css/skins/square/_all.css" type="text/css" />
<link rel="stylesheet" rev="stylesheet" href="${basePath}/res/css/jquery-ui.css" type="text/css" />
<!--速查引用begin -->
<script src="${basePath}/res/js/jquery-1.10.2.min.js" language="jscript" type="text/jscript"></script>
<script src="${basePath}/res/js/jquery.autocompleter.js" language="jscript" type="text/jscript"></script>
<!--速查引用end -->
<script src="${basePath}/res/js/icheck.min.js" language="jscript" type="text/jscript"></script>
<script src="https://api.map.baidu.com/api?v=3.0&ak=ywuQA3xCyUl7aMmcyYfajXSxKvqbodOA" type="text/javascript"></script>
<script type="text/javascript" src="https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script src="${basePath}/res/js/MarkerClusterer.js" language="jscript" type="text/jscript"></script>
<script src="${basePath}/res/js/mapv.min.js" language="jscript" type="text/jscript"></script>
<script src="${basePath}/res/js/jquery-ui.js" language="jscript" type="text/jscript"></script>
<%-- <script type="text/javascript" src="${basePath}/res/easyui-1.3/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="${basePath}/res/easyui-1.3/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="${basePath}/res/easyui-1.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${basePath}/res/easyui-1.3/themes/icon.css"> --%>
<link rel="stylesheet" type="text/css" href="${basePath}/res/chosen_v1.8.7/chosen.css">
<script src="${basePath}/res/chosen_v1.8.7/chosen.jquery.min.js" language="jscript" type="text/jscript"></script>
<script src="${basePath}/res/chosen_v1.8.7/docsupport/init.js" language="jscript" type="text/jscript"></script>
<script src="${basePath}/res/chosen_v1.8.7/docsupport/prism.js" language="jscript" type="text/jscript"></script>
<style type="text/css">
html {height: 100%; margin:0;font-family:"微软雅黑";}
#allmap{height:100%;width:100%;}
a:HOVER{color: white;text-decoration: none}
.label {cursor: pointer; float: left;font-size: 14px;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
.input1{border:1px solid !important;width: 65%;background: white}
input.button{height: 30px;line-height: 30px}
select{background: white}
em{display: block;}
body {
line-height: 1;
position: relative;
right: 0;
-webkit-transition: right .3s;
transition: right .3s;
height: 100%; margin:0;font-family:"微软雅黑";
}
body.open {
right: 300px;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* CSS RESET DONE */
.header {
margin-bottom: 40px;
position: relative;
}
.clearfix {
clear: both;
}
.container {
position: relative;
padding: 40px 10%;
text-align: center;
height: 100%;
}
p {
text-align: left;
font-size: 16px;
line-height: 40px;
margin: 0 200px;
padding-bottom: 50px;
}
h1 {
margin: 40px 0;
font-size: 40px;
line-height: 40px;
font-weight: bold;
}
a {
text-decoration: none;
color: #fff;
margin: 0 10px;
}
.btn {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
position: relative;
display: inline-block;
padding: 10px 20px;
height: 50px;
background-color: #838383;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-webkit-box-shadow: 0 3px 0 0 #636363;
box-shadow: 0 3px 0 0 #636363;
line-height: 30px;
font-size: 14px;
font-weight: normal;
text-shadow: 0px 1px 1px #888;
}
.btn:active, .btn.active {
top: 1px;
-webkit-box-shadow: 0 1px 0 0 #636363;
box-shadow: 0 1px 0 0 #636363;
}
.btn.submit {
font-size: 12px;
height: 30px;
line-height: 30px;
padding: 0 10px;
margin: 0;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
.btn-small {
height: 30px;
font-size: 12px;
line-height: 10px;
}
a.btn-small span.btn {
height: 30px;
}
a.menu-icon {
position: absolute;
top: 60px;
right: 90px;
font-size: 23px;
z-index:1;
}
ul.side-menu {
position: fixed;
top: 0;
right: -500px;
width: 500px;
height: 100%;
background-color: #444;
z-index: 100;
-webkit-transition: right .3s;
transition: right .3s;
}
ul.side-menu.open {
right: 0;
}
ul.side-menu li {
position: absolute;
top: 100%;
left: 0;
right: 0;
padding: 0 10px;
text-align: left;
height: 45px;
line-height: 45px;
border-bottom: 1px solid #555;
-webkit-transition: top .3s;
transition: top .3s;
}
ul.side-menu li.row {
border: 0;
position: static;
top: 0;
height: 0;
-webkit-transition: none;
transition: none;
}
ul.side-menu li.metro {
position: absolute;
padding: 0;
height: 125px;
text-align: center;
background-color: #CCC;
}
ul.side-menu li.metro.half {
width: 50%;
}
ul.side-menu li.metro.full {
width: 100%;
}
ul.side-menu h2.title {
text-align: left;
padding: 0 20px;
position: relative;
top: 0px;
font-size: 23px;
line-height: 60px;
height: 60px;
background-color: #555;
-webkit-transition: top .3s;
transition: top .3s;
}
ul.side-menu li a {
display: block;
font-size: 12px;
padding: 0;
margin: 0;
height: inherit;
line-height: inherit;
}
ul.side-menu li.metro a {
margin: 42px 0;
height: 40px;
font-size: 40px;
}
/* Colors */
ul.side-menu li.metro.blue {
background-color: #5c84db;
}
ul.side-menu li.metro.light-blue {
background-color: #2FC2EF;
}
ul.side-menu li.metro.purple {
background-color: #a24fea;
}
ul.side-menu li.metro.red {
background-color: #e54747;
}
ul.side-menu li.metro.pink {
background-color: #ea4c89;
}
ul.side-menu li.metro.green {
background-color: #85e500;
}
ul.side-menu li.metro.orange {
background-color: #e28f00;
}
ul.side-menu li.metro.teal {
background-color: #00e2e2;
}
.copyInput {
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: -10;
}
.chosen-container {
background: white;
line-height: 23px;
height: 23px;
}
.chosen-container .chosen-results li {
position: unset;
height: auto;
border: none;
}
.chosen-container .chosen-results li em{
display: inline-block;
}
.shop{
width:100%;
margin-top: 400px;
height: 420px;
overflow-y: auto
}
.shop table{
width: 100%;
font-size: 13px;
color:white;
vertical-align:middle;
text-align:center;
}
.shop tr td{
padding: 10px 5px;
cursor: pointer;
}
</style>
</head>
<c:if test="${not empty msg }">
<script>
alert("${msg}");
</script>
</c:if>
<body>
<div id="allmap"></div>
<a style="color: black" class="menu-icon" href="#"><i class="icon-reorder"></i></a>
<!--
<div style="z-index: 1; position: absolute;top: 100px;right: 60px;border: 2px solid; height: 23px; line-height: 23px;width: 85px">
<span style="display:inline-block;background:url('http://api.map.baidu.com/img/markers.png');width: 23px;height: 25px"></span><em style="float: right;font-weight: bold;">实地采集</em>
</div>
<div style="z-index: 1; position: absolute;top: 140px;right: 60px;border: 2px solid; height: 23px; line-height: 23px;width:85px">
<span style="display:inline-block;background:url('http://api.map.baidu.com/img/markers.png');background-position :0px 75px; width: 23px;height: 25px"></span><em style="float: right;font-weight: bold;">网上采集</em>
</div> -->
<div style="z-index: 1; position: absolute;top:100px;right: 200px;border: 2px solid; height: 23px; line-height: 23px;width: 160px">
<span style="display:inline-block;<%--background:url('http://api.map.baidu.com/img/markers.png');--%>width: 23px;height: 25px"></span><em style="float: right;font-weight: bold;">共查询到<span id='querycount' style="color:red"></span>位客户</em>
</div>
<form name="companyMtForm" action="${basePath }/wdMap" method="post" style="margin: 30px 10px;">
<ul class="side-menu open">
<h2 class="title" style="color:white;text-align: center">查询条件</h2>
<li class="link adminLi" style="top: 60px;"><a><label style="width: 20%" class="label" for="name" >门店名称：</label><input type="text" name="name" id="name" maxlength="100" value="${wdShop.name}" class="input1"/></a></li>
<li class="link adminLi" style="top: 105px;"><a><label style="width: 20%" class="label" for="address">门店地址：</label><input type="text" name=address id="address" maxlength="100" value="${wdShop.address }" class="input1"/></a></li>
<li class="link adminLi" style="top: 150px;"><a><label style="width: 20%" for="area1" class="label" >省：</label><select id="area1" style="width:65%; border:1px solid #cfcfcf; padding:2px; visibility : visible" onchange="getAreaInfo(this.value,'',2);setArea(this.value,2);" class="select2">
<option>省</option></select></a></li>
<li class="link adminLi" style="top: 195px;"><a><label style="width: 20%" for="area2" class="label">市：</label><select id="area2" style="width:65%; border:1px solid #cfcfcf; padding:2px; visibility : visible" onchange="setArea(this.value,3)" class="select1">
<option value="">市</option>
</select>
<input type="hidden" name="regionId" id="regionId" value=""> </a></li>
<li class="link projectLi" style="top: 240px;"><a><label style="width: 20%" class="label">施工项目：</label>
<select id="itemId" style="width:65%;" autocomplete="off" ></select>
<input name="itemId" type="hidden" id="hiddenItemId">
</a>
</li>
<li class="link locationLi" style="top: 285px;">
<a>
<label style="width: 20%" class="label" for="name">车主位置：</label><input type="text" name="userLocatoin" id="userLocatoin" maxlength="100" value="" class="input1" style="width: 47%;"/>
<input type="text" name="distance" id="distance" maxlength="5" value="10" class="input1" style="width: 10%;"/> 公里
</a>
</li>
<!--
<li class="link">
<a>
<div class="icheckbox">
<label for="gpsSource0" class="label" style="width: 30%">系统定位</label><input type="checkbox" id="gpsSource0" name="gpsSource" value="0" />
</div>
</a>
</li>
<li class="link">
<a>
<div class="icheckbox">
<label for="gpsSource1" class="label" style="width: 30%">客服定位</label><input type="checkbox" id="gpsSource1" name="gpsSource" value="1" />
</div>
</a>
</li>
<li class="link">
<a>
<div class="icheckbox">
<label for="gpsSource2" class="label" style="width: 30%">师傅定位</label><input type="checkbox" id="gpsSource2" name="gpsSource" value="2" />
</div>
</a>
</li> -->
<li class="link searchLi" style="top: 328px;"><a ><input name="searchbutton" class="button" type="button" value="搜索周边" style="width: 65%; margin-left: 20%;" onclick="searchLocatoin();"/></a></li>
<!-- TODO(daibin): 给个发送按钮 -->
<li class="link queryLi" style="top: 372px;"><a ><input name="searchbutton" class="button" type="submit" value="查询" style="width: 40%;margin-left:30%"/></a></li>
<li class="link pushLi" style="top: 372px;display:none;" id="pushProject"><a ><input name="searchbutton" class="button" onclick="pushProject();" value="推送" style="width: 40%;margin-left:30%"/></a></li>
<div class="shop">
<table summary="门店">
<thead>
<tr>
<th>门店名称</th>
<th>门店电话</th>
<th>距离</th>
<th>授权门店</th>
</tr>
</thead>
<tbody id="provinceData"></tbody>
</table>
</div>
</ul>
</form>
<input type='text' id="pushProjectUrl" class='copyInput'>
<a id="video" href="" target="_blank"></a>
</body>
<html><head></head></html>
<script type="text/javascript">
var userType = '${userType}';
// 3：卖家，20积分卖家
if(userType == "3" || userType == "20"){
$("#pushProject").show();
$(".adminLi").remove();
$(".queryLi").remove();
$(".projectLi").css("top", "60px");
$(".locationLi").css("top", "105px");
$(".searchLi").css("top", "150px");
$(".pushLi").css("top", "195px");
}
// 卖家id
var sellerId = '${sellerId}';
var querycount = 0;
var areaid_citys = {
'650000': "新疆", '540000': "西藏",'150000': "内蒙古",'630000': "青海",'510000': "四川",'230000': "黑龙江",'620000': "甘肃",'530000': "云南",'450000': "广西", '430000': "湖南",'610000': "陕西",
'440000': "广东",'220000': "吉林",'130000': "河北",'420000': "湖北",'520000': "贵州", '370000': "山东",'360000': "江西", '410000': "河南",'210000': "辽宁",'140000': "山西",
'340000': "安徽",'350000': "福建",'330000': "浙江", '320000': "江苏",'500000': "重庆",'640000': "宁夏", '460000': "海南",'710000':"台湾",'110000': "北京",'120000': "天津",'310000': "上海",'810000':"香港",
'820000':"澳门"};
var citys_areaid = {
"新疆":'650000',"西藏":'540000', "内蒙古":'150000',"青海":'630000', "四川":'510000', "黑龙江":'230000',"甘肃":'620000',"云南":'530000',"广西":'450000', "湖南":'430000',"陕西":'610000',
"广东":'440000',"吉林":'220000',"河北":'130000',"湖北":'420000',"贵州":'520000',"山东":'370000', "江西":'360000',"河南":'410000',"辽宁":'210000',"山西":'140000',"安徽":'340000',"福建":'350000',
"浙江":'330000',"江苏":'320000',"重庆":'500000',"宁夏":'640000' ,"海南":'460000',"台湾":'710000',"北京":'110000',"天津":'120000',"上海":'310000',"香港":'810000',"澳门":'820000'};
var options = {
splitList: [
{
start: 0,
end: 100,
value: '#F6EFA6'
},{
start: 100,
end: 200,
value: '#E8BC8E'
},{
start: 200,
end: 300,
value: '#DA8976'
},{
start: 300,
end: 400,
value: '#C85555'
},{
start: 400,
end: 500,
value: '#BE5555'
},{
start: 500,
value: '#AA3C46'
}
],
globalAlpha: 1,
draw: 'choropleth',
lineWidth: 2, // 描边宽度
strokeStyle: 'rgba(255, 0, 0, 1)' // 描边颜色
}
var textOptions = {
draw: 'text',
font: '16px Microsoft YaHei',
fillStyle: 'black',
shadowColor: 'white',
textAlign: 'center',
textBaseline: 'middle',
shadowBlue: 20,
zIndex: 11,
shadowBlur: 10
}
var textOptions_province = {
draw: 'text',
font: '12px Microsoft YaHei',
fillStyle: 'black',
shadowColor: 'white',
textAlign: 'center',
textBaseline: 'middle',
shadowBlue: 20,
zIndex: 11,
shadowBlur: 10
}
var oldZoom = -1;
var areaids = JSON.parse(${chinajson})[0];
var areaids_province = JSON.parse(${provincejson})[0];
var oldcity ='';
var markers = [];
var map = new BMap.Map("allmap");
var myGeo = new BMap.Geocoder(); //地址解析类
var china_mapvLayer,china_text_mapvLayer,province_mapvLayer,province_text_mapvLayer;
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.enableScrollWheelZoom(true);
map.addEventListener("zoomend", zoomendInfo);
map.addEventListener("zoomstart", zoomstartInfo);
// map.addEventListener("dragend", dragendInfo);
var myCity = new BMap.LocalCity();
myCity.get(myFun);
$.getJSON('${basePath }/res/geojson/china.geo.json', function(chinaJson){
var dataSet = mapv.geojson.getDataSet(chinaJson);
var data = dataSet.get({
filter: function (item) {
if (!areaids[item.name]) {
return false;
}
item.count = areaids[item.name];
return true;
}
});
dataSet = new mapv.DataSet(data);
china_mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
//加字
var data = [];
querycount = 0;
for (var key in areaid_citys) {
var center = mapv.utilCityCenter.getCenterByCityName(areaid_citys[key]);
var areacount = areaids[key] || 0
if(areacount>0){
querycount += areacount;
data.push(
{
geometry: {
type: 'Point',
coordinates: [center.lng, center.lat]
},
text: areaid_citys[key]+"("+areacount +")"
}
);
}
}
var dataSet = new mapv.DataSet(data);
china_text_mapvLayer = new mapv.baiduMapLayer(map, dataSet, textOptions);
$("#querycount").text(querycount);
});
$(document).ready(function(){
var sources = '${projectList}';
sources = JSON.parse(sources);
$("#itemId").empty();
if(sources != null ){
$("#itemId").append('<option value="">全部</option>');
for(var i =0; i< sources.length; i++){
$("#itemId").append('<option value="'+sources[i].value+'" data-lable="'+sources[i].lable+'">'+sources[i].value+'</option>');
}
}
$("#itemId").chosen({
no_results_text:'未查找到该项目:',
placeholder_text_single: '选择项目',
enable_split_word_search: true,//是否开启分词搜索
inherit_select_classes:true, //是否继承 select 元素的 class
max_selected_options: 1,
search_contains: true,
case_sensitive_search: true,
});
$("#itemId").on('change', function(e, params) {
$("input[name='itemId']").val($("#itemId").find("option:selected").attr("data-lable"));
});
/* $("#itemId").autocomplete({
source: sources,
select: function (event, ui) {
$("input[name='itemId']").val(ui.item.lable);
$("#itemId").val(ui.item.value);
event.stopPropagation();
return false;
}
}).focus(function(){
$(this).autocomplete("search", "");
}) */
/* $('#itemId').on('focus', function (){
$(this).autocomplete().onValueChange();
}); */
var menu_head = $('ul.side-menu h2.title').height();
var item_height = $('ul.side-menu li a').height();
/* $(document).mouseup(function (e) {
var container = $('ul.side-menu');
if ((!container.is(e.target) && container.has(e.target).length === 0) &&
(!($('a.menu-icon').is(e.target)) && $('a.menu-icon').has(e.target).length === 0) && $(".ui-state-active").length != 1) {
container.removeClass("in");
$('body, ul.side-menu').removeClass("open");
$('ul.side-menu li').css("top", "100%");
$('ul.side-menu h2').css("top", "-60px");
}
}); */
$('.icheckbox input').iCheck({
checkboxClass: 'icheckbox_square-blue'
});
$("a.menu-icon").click(function(e) {
e.preventDefault();
if ($('ul.side-menu, body').hasClass('open')) {
$('ul.side-menu').removeClass('open');
$('body').removeClass('open');
// Reset menu on close
$('ul.side-menu li').css("top", "100%");
$('ul.side-menu h2').css("top", "-60px");
}
else {
$('ul.side-menu').addClass('open');
$('body').addClass('open');
$('ul.side-menu h2').css("top", 0);
$('ul.side-menu li').each(function() {
// Traditional Effect
if ($(this).hasClass('link')) {
var i = ($(this).index() - 1)
var fromTop = menu_head + (i * item_height);
var delayTime = 100 * i;
$(this).delay(delayTime).queue(function(){
$(this).css("top", fromTop);
$(this).dequeue();
});
}
// Metro Effect
else if ($(this).hasClass('metro')) {
var row_i = ($(this).parent().parent().index() - 1); // Vertical Index
var col_i = $(this).index(); // Horizontal Index
var fromTop = menu_head + (row_i * 125);
var fromLeft = col_i * 125;
var delayTime = (row_i * 200) + Math.floor((Math.random() * 200) + 1);
console.log(delayTime);
$(this).css("left", fromLeft);
$(this).delay(delayTime).queue(function(){
$(this).css("top", fromTop);
$(this).dequeue();
});
}
});
}
})
var sub_area_id = "";
var areaIds = '${regionId}';
var len = areaIds.length;
/*
if(len >= 3){
sub_area_id = areaIds.substring(0,1);
sub_area_ids = areaIds.substring(0,3);
getAreaInfo(sub_area_id,"1",sub_area_ids);
if(len>=6){
sub_area_id = areaIds.substring(0,3);
sub_area_ids = areaIds.substring(0,6);
getAreaInfo(sub_area_id,"2",sub_area_ids);
if(len>=10){
sub_area_id = areaIds.substring(0,6);
sub_area_ids = areaIds.substring(0,10);
getAreaInfo(sub_area_id,"3",sub_area_ids);
}
}
}else{
}*/
getAreaInfo('0','',1);
/* function showRestartDialog(id){ //此方法需要做到像加载地区 省一样的功能
// initRestartDialog();
$('#proName').combobox({
url : '${basePath}/orderSys/order/project?userUUID='+id,
valueField : 'id',
textField : 'name',
editable : true, //保证数据输入框可以输入
mode : 'local', //local 是本地 remote 是需要远程后台服务器进行搜索
panelWidth : 250, // 下拉框宽度
filter : function(q,row){ //easyUI 中下拉列表combobox的模糊匹配
var opts=$(this).combobox('options'); //本地数据进行数据检索 q是自带的参数名称 如果是remote前端是不需要操作后台自动返回
return row[opts.textField].indexOf(q) > -1;
},
onLoadSuccess: function(data,row) {
$(this).combobox('select',data[0].id);
}
});
} */
// project();
});
function getAreaInfo(val,upAreaId,areaLevel){
if (val != '' ){
$.ajax({//发送AJAX请求
type : "POST",
async:false,
url : "${basePath}/orderSys/region/getareainfo/"+val+"?upAreaId="+upAreaId,
success : function(msg) {
if(msg != ''){
$('#area'+areaLevel).html(msg);
$('#area'+areaLevel).css("visibility","visible");
}else{
for(var i=areaLevel;i<=5;i++){
$('#area'+i).css("visibility","hidden");
}
}
}
});
}
}
function project(){
/* $('#itemId').combobox({
url : '${basePath}/orderSys/order/project?userUUID=',
valueField : 'id',
textField : 'name',
editable : true, //保证数据输入框可以输入
mode : 'local', //local 是本地 remote 是需要远程后台服务器进行搜索
panelWidth : 250, // 下拉框宽度
filter : function(q,row){ //easyUI 中下拉列表combobox的模糊匹配
var opts=$(this).combobox('options'); //本地数据进行数据检索 q是自带的参数名称 如果是remote前端是不需要操作后台自动返回
return row[opts.textField].indexOf(q) > -1;
},
onLoadSuccess: function(data,row) {
$(this).combobox('select',data[0].id);
}
}); */
}
function getProvinceJson(city){
if(city != ''){
map.clearOverlays();
$.ajax({//发送AJAX请求
type : "POST",
async:false,
data:{'label':city},
url : "${basePath }/getProvinceJson",
success : function(provinceData) {
if(!!provinceData){
for(index in provinceData){
var wd = provinceData[index];
var point = new BMap.Point(wd.longitude, wd.latitude);
var info = getInfo(wd);
addCertMarker(point,info);
}
}
}
});
}
}
function setArea(val,classLevel){
if(val != '' && val != null ){
$('#regionId').val(val);
}else{
var num=classLevel-1;
if(num==0){
val="";
}else{
val=$("#area"+num).val();
}
$("#regionId").val(val);
//去掉选取空白时后面的分类
$("#area"+classLevel).html("");
$("#area"+classLevel).css("visibility","hidden");
}
}
function addCertMarker(point,info){
var myIcon;
var distance = (map.getDistance(globalPoint,point)/1000).toFixed(2)+' 千米';
myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25), // 指定定位位置
imageOffset: new BMap.Size(0, 0) // 设置图片偏移
});
var marker=new BMap.Marker(point,{icon:myIcon});
var distanceTxt = info.address +"。 距离：" + distance;
// TODO(daibin):加上返工率
var infoText = "<em>门店名称："+info.name+"<input type='text' value='"+info.wdName+"' class='copyInput'><i class='icon-save' title='复制' onclick='copyText(this)'></i></em>"+info.mobile+"<em>地址："+info.address+"<input type='text' value='"+info.address+"' class='copyInput'><i class='icon-save' title='复制' onclick='copyText(this)'></i></em><em>距离："+distance+"<input type='text' value='"+distanceTxt+"' class='copyInput'><i class='icon-save' title='复制' onclick='copyText(this)'></i></em>"+
"<em>等级："+getWdLevel(info.level)+"</em>";
// 存在返工率 并且不是卖家和积分卖家 可查看返工和售后
if(info.reword && userType != "3" && userType != "20"){
var itemId = $("#hiddenItemId").val();
var text = info.itemName + " "+ "<a style='color:red'>"+info.total+"</a>"+"<a style='color:blue' onclick='jumpAfterSale(this)' data-type='2' data-item="+itemId+" data-shop='"+info.userUuid+"'> 返工（"+ info.reword + "%）<a>"
+ "<a style='color:blue' onclick='jumpAfterSale(this)' data-type='1' data-item="+itemId+" data-shop='"+info.userUuid+"'> 售后（"+ info.afterSale + "%）</a>";
infoText += "<em>"+text+"</em>";
}
var infoWindow = new BMap.InfoWindow(infoText, infoWinopts); // 创建信息窗口对象
marker.addEventListener("click", function(){
map.closeInfoWindow();
map.openInfoWindow(infoWindow,point); //开启信息窗口
});
/* marker.addEventListener("mouseout", function(){
map.closeInfoWindow();
}); */
map.addOverlay(marker);
}
var infoWinopts = { //弹出窗配置
width : 0, // 信息窗口宽度
height: 0, // 信息窗口高度
title : "门店详细信息" // 信息窗口标题
}
function getInfo(wd){
var info = {};
info.name = "<a style='color:blue' href=javascript:parent.openNewPage('${basePath}/orderSys/user/branchView/"
+ wd.wdId
+ "','查看',5)>"
+ wd.name + "</a>";
if(null != wd.mobile){
info.mobile="<em>门店电话："+ wd.mobile+")<input type='text' value='"+wd.mobile+"' class='copyInput'><i class='icon-save' title='复制' onclick='copyText(this)'></i></em>";
}else{
info.mobile = "";
}
info.address = wd.address + wd.doorno;
if(userType == "3" || userType == "20"){
info.name = "<a style='color:black'>"+ wd.name + "</a>";
info.address = wd.address;
}
info.level = wd.level;
info.wdName = wd.name;
info.itemName = $("#itemId").val();
if(wd.orderStatistics && wd.orderStatistics.orderCount){
var order = wd.orderStatistics;
info.reword = order.reworkCount/order.orderCount * 100;
info.afterSale = order.afterSaleCount/order.orderCount * 100;
info.total = order.orderCount;
}
info.userUuid = wd.userUuid;
return info
}
function zoomstartInfo(e){
oldZoom = map.getZoom();
}
function zoomendInfo(e){
if(oldZoom < map.getZoom() && map.getZoom()==7) { //放大
map.zoomIn(); //8
return ;
}
if(oldZoom < map.getZoom() && (map.getZoom()==9 ||map.getZoom()==10 )) { //放大
map.setZoom(11);//11
return ;
}
if(oldZoom > map.getZoom() && (map.getZoom()==10||map.getZoom()==9 )) { //缩小
map.setZoom(8); //9
return ;
}
if(oldZoom > map.getZoom() && map.getZoom()==7) { //缩小
map.zoomOut(); //7
return ;
}
if(map.getZoom()>=1 && map.getZoom()<=7){
map.clearOverlays();
if(province_mapvLayer!=undefined){
province_mapvLayer.hide();
province_text_mapvLayer.hide();
}
china_mapvLayer.show();
china_text_mapvLayer.show();
}else if(map.getZoom()==8){
map.clearOverlays();
if(province_mapvLayer!=undefined){
province_mapvLayer.hide();
province_text_mapvLayer.hide();
}
if(map.getCenter()){
myGeo.getLocation(map.getCenter(), function(rs){
var areaid = citys_areaid[rs.addressComponents.province.replace('省', '').replace('自治区', '').replace('维吾尔', '').replace('壮族', '').replace('回族', '').replace('市', '')];
if(areaid == undefined) return;
if(areaid=='110000'|| areaid=='120000' || areaid=='310000' || areaid=='500000'){ //特殊处理四个直辖市
if(province_mapvLayer!=undefined){
province_mapvLayer.hide();
province_text_mapvLayer.hide();
china_mapvLayer.hide();
china_text_mapvLayer.hide();
}
if(map.getCenter()){
myGeo.getLocation(map.getCenter(), function(rs){
// var areaid = citys_areaid[rs.addressComponents.province.replace('省', '').replace('自治区', '').replace('维吾尔', '').replace('壮族', '').replace('回族', '').replace('市', '')];
var city = rs.addressComponents.city;
if(city == undefined) return;
if(city !=oldcity || map.getOverlays().length==0){
oldcity = city;
getProvinceJson(city);
}
});
}
return ;
}
$.getJSON('${basePath }/res/geojson/'+areaid+'.geo.json', function(provinceJson){
china_mapvLayer.hide();
china_text_mapvLayer.hide();
var dataSet = mapv.geojson.getDataSet(provinceJson);
var data = dataSet.get({
filter: function (item) {
if (!areaids_province[item.name]) {
return false;
}
item.count = areaids_province[item.name];
return true;
}
});
var prodinceCount = areaids[areaid];
for(var i=0;i<data.length;i++){
var citydata = data[i];
if(i == data.length -1 ){
citydata.count = prodinceCount;
areaids_province[citydata.name] = citydata.count;
}else{
prodinceCount -= citydata.count;
}
}
dataSet = new mapv.DataSet(data);
province_mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
//加字
var data = [];
for (var index in provinceJson.features) {
var city = provinceJson.features[index];
var center = mapv.utilCityCenter.getCenterByCityName(city.properties.name.replace('市', ''));
var areacount = areaids_province[provinceJson.features[index].properties.name] || 0;
if(areacount>0){
data.push(
{
geometry: {
type: 'Point',
coordinates: [center.lng, center.lat]
},
text:city.properties.name+"("+areacount +")"
}
);
}
}
var dataSet = new mapv.DataSet(data);
province_text_mapvLayer = new mapv.baiduMapLayer(map, dataSet, textOptions_province);
});
});
}
}else{
if(province_mapvLayer!=undefined){
province_mapvLayer.hide();
province_text_mapvLayer.hide();
china_mapvLayer.hide();
china_text_mapvLayer.hide();
}
if(map.getCenter()){
myGeo.getLocation(map.getCenter(), function(rs){
// var areaid = citys_areaid[rs.addressComponents.province.replace('省', '').replace('自治区', '').replace('维吾尔', '').replace('壮族', '').replace('回族', '').replace('市', '')];
var city = rs.addressComponents.city;
if(city == undefined) return;
if(city !=oldcity || map.getOverlays().length==0){
oldcity = city;
getProvinceJson(city);
}
});
}
}
}
function myFun(result){
var cityPoint = result.center;//获取城市中心点
map.centerAndZoom(cityPoint, 6);
}
//地图拖拽时候触发
function dragendInfo(e){
if(map.getZoom()>8){
if(map.getCenter()){
myGeo.getLocation(map.getCenter(), function(rs){
// var areaid = citys_areaid[rs.addressComponents.province.replace('省', '').replace('自治区', '').replace('维吾尔', '').replace('壮族', '').replace('回族', '').replace('市', '')];
var city = rs.addressComponents.city;
if(city == undefined) return;
if(city !=oldcity || map.getOverlays().length==0){
oldcity = city;
getProvinceJson(city);
}
});
}
}
}
var provinceData = [];
function getGps(userLocatoin,distance){
var parameter = "" ;
var province = $("#area1 option:selected").text();
var city = $("#area2 option:selected").text()
if(province != null && province != "全部" && province != ""){
parameter = parameter + province;
if(city != null && city != "市" && city != ""){
parameter = parameter + city;
}
}else{
parameter = userLocatoin;
}
myGeo.getPoint(userLocatoin, function(point){
globalPoint = point;
globalDist = distance;
if (point) {
var param = { latitude:point.lat,
longitude:point.lng,
distance:distance,
itemId: getItemVal()
};
$.ajax({//发送AJAX请求
type : "POST",
data : param,
async:false,
url : "${basePath}/getUserLocation",
success : function(data) {
provinceData = data;
map.removeEventListener("zoomend", zoomendInfo);
map.removeEventListener("zoomstart", zoomstartInfo);
map.clearOverlays();
var myIcon;
myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25), // 指定定位位置
imageOffset: new BMap.Size(0, -250) // 设置图片偏移
});
var carmarker=new BMap.Marker(globalPoint,{icon:myIcon});
map.addOverlay(carmarker);
map.centerAndZoom(globalPoint, 13);
var circle = new BMap.Circle(globalPoint,globalDist*1000,{strokeColor:"blue", strokeWeight:2, strokeOpacity:1,fillOpacity:0.2}); //创建圆
map.addOverlay(circle);
if(!!provinceData){
for(index in provinceData){
var wd = provinceData[index];
var point = new BMap.Point(wd.longitude, wd.latitude);
var info = getInfo(wd);
addCertMarker(point,info);
var pois = [
globalPoint,
point
];
var polyline =new BMap.Polyline(pois, {
enableClicking: false,//是否响应点击事件，默认为true
strokeWeight:'3',//折线的宽度，以像素为单位
strokeOpacity: 1,//折线的透明度，取值范围0 - 1
strokeColor:"#0000FF" //折线颜色
});
map.addOverlay(polyline); //增加折线
var opts = {
position : point, // 指定文本标注所在的地理位置
offset : new BMap.Size(0, 0) //设置文本偏移量
}
let distance = (map.getDistance(globalPoint,point)/1000).toFixed(2);
provinceData[index].distance = distance;
var label = new BMap.Label("距离:"+distance+' 千米。',opts);
map.addOverlay(label);
}
provinceData.sort(function (a, b){
return a.distance - b.distance;
});
console.log(provinceData)
var html = "";
for(index in provinceData){
var wd = provinceData[index];
html+= "<tr onclick='figures("+ index +")'>"
+'<td>'+wd.name+'</td>'
+'<td>'+wd.mobile+'</td>'
+'<td>'+wd.distance+'</td>'
+'<td>'+getWdLevel(wd.level)+'</td>'
+'</tr>'
}
$('#provinceData').html(html);
}
// map.addEventListener("zoomend", zoomendInfo);
// map.addEventListener("zoomstart", zoomstartInfo);
}
});
}else{
alert("地图上无法获取该位置！");
map.clearOverlays();
}
}, parameter);
}
var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25), // 指定定位位置
imageOffset: new BMap.Size(0, 0) // 设置图片偏移
});
function figures(index) {
var wd = provinceData[index];
var point = new BMap.Point(wd.longitude, wd.latitude);
var info = getInfo(wd);
var myIcon;
var distance = wd.distance+' 千米';
var marker=new BMap.Marker(point,{icon:myIcon});
var distanceTxt = info.address +"。 距离：" + distance;
// TODO(daibin):加上返工率
var infoText = "<em>门店名称："+info.name+"<input type='text' value='"+info.wdName+"' class='copyInput'><i class='icon-save' title='复制' onclick='copyText(this)'></i></em>"+info.mobile+"<em>地址："+info.address+"<input type='text' value='"+info.address+"' class='copyInput'><i class='icon-save' title='复制' onclick='copyText(this)'></i></em><em>距离："+distance+"<input type='text' value='"+distanceTxt+"' class='copyInput'><i class='icon-save' title='复制' onclick='copyText(this)'></i></em>"+
"<em>等级："+getWdLevel(info.level)+"</em>";
// 存在返工率 并且不是卖家和积分卖家 可查看返工和售后
if(info.reword && userType != "3" && userType != "20"){
var itemId = $("#hiddenItemId").val();
var text = info.itemName + " "+ "<a style='color:red'>"+info.total+"</a>"+"<a style='color:blue' onclick='jumpAfterSale(this)' data-type='2' data-item="+itemId+" data-shop='"+info.userUuid+"'> 返工（"+ info.reword + "%）<a>"
+ "<a style='color:blue' onclick='jumpAfterSale(this)' data-type='1' data-item="+itemId+" data-shop='"+info.userUuid+"'> 售后（"+ info.afterSale + "%）</a>";
infoText += "<em>"+text+"</em>";
}
var infoWindow = new BMap.InfoWindow(infoText, infoWinopts); // 创建信息窗口对象
map.closeInfoWindow();
map.openInfoWindow(infoWindow,point); //开启信息窗口
map.addOverlay(marker);
}
function searchLocatoin(){
var userLocatoin = $.trim($("#userLocatoin").val());
var distance =$.trim($("#distance").val());
getGps(userLocatoin,distance);
}
function getCenterPoint(p1,p2){
var lng1 = parseFloat(p1.lng);
var lat1 = parseFloat(p1.lat);
var lng2 = parseFloat(p2.lng);
var lat2 = parseFloat(p2.lat);
var lngca = (Math.max(lng1,lng2)-Math.min(lng1,lng2))/2;
var latca = (Math.max(lat1,lat2)-Math.min(lat1,lat2))/2;
var lngcenter = Math.min(lng1,lng2)+lngca;
var latcenter = Math.min(lat1,lat2)+latca;
var pointcenter = new BMap.Point(lngcenter,latcenter);
return pointcenter;
}
function getWdLevel(level){
if(level == 0){
return "授权门店";
}else if (level == 1){
return "三级授权门店";
}else if(level == 2){
return "二级授权门店";
}else if(level == 3){
return "一级授权门店";
}
}
// 得到施工项目值
function getItemVal(){
var itemId = $.trim($("#itemId").val());
var itemVal = $("input[name='itemId']").val();
if(itemId){
return itemVal;
}
return "";
}
function copyText(arg){
var input = $(arg).parent().find("input");
input.select();
document.execCommand("copy")
alert("复制成功");
}
// 推送项目
function pushProject(){
var itemName = $("#itemId").val();
itemName = $.trim(itemName);
if(itemName === ""){
alert("请先选择施工项目");
return false;
}
var itemId = $("#hiddenItemId").val();
pushMap(itemId);
}
// 卖家推送项目地图链接
function pushMap(itemId){
// TODO(daibin): 三个项目都要修改
var url = "http://xiuchemao.net/xcm";
var src = "/showWd?itemId="+encodeURI(itemId)+"&sellerId="+encodeURI(sellerId);
url += src;
$("#pushProjectUrl").val(url);
var input = $("#pushProjectUrl");
input.select();
document.execCommand("copy")
alert("推送链接复制成功");
}
function jumpAfterSale(arg){
var type = $(arg).attr("data-type");
var itemId = $(arg).attr("data-item");
var userUuid = $(arg).attr("data-shop");
sessionStorage.removeItem('afterSale_type');
sessionStorage.setItem('afterSale_type', type);
sessionStorage.removeItem('afterSale_itemId');
sessionStorage.setItem('afterSale_itemId', itemId);
sessionStorage.removeItem('afterSale_userUuid');
sessionStorage.setItem('afterSale_userUuid', userUuid);
parent.openNewPage('${basePath}/orderSys/afterSale/index', '售后列表查询', 5);
}
</script>
