v6-地图显示

1.效果图

2.前端代码

    2.1引入js

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=pRiiOcQDuGaYomfTz5P5TfRR9U7uSRzV"></script>  
<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>

<script type="text/javascript">
var isSelect = '0';
var map = new BMap.Map("container"); // 创建地图实例  
var heatmapOverlay; //热力图
var currentPoint;
//获取当前位置
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(){
    if(this.getStatus() == BMAP_STATUS_SUCCESS){
       if(this.nX == undefined){
          currentPoint = new BMap.Point("117.12336000", "36.66157600");
       }else{
          currentPoint = new BMap.Point(this.nX.longitude, this.nX.latitude);
       }
       map.centerAndZoom(currentPoint, "16");
    }else {
       jAlert('failed'+this.getStatus());
    }
});// 初始化地图，设置中心点坐标
var opts = {
      type : BMAP_NAVIGATION_CONTROL_LARGE
   }; //地图控件 缩放  
map.addControl(new BMap.NavigationControl(opts)); //加载地图控件 缩放  
map.enableScrollWheelZoom();//滚轮放大缩小
$(document).ready(function() {
   $("#date1").datepicker({
      changeMonth : true,
      changeYear : true,
      year : true
    });
   $("#show-hide").click(function(e){
      var _this = $(this);
      var bus = $("#businessDiv");
      var span = _this.find("span");
      if(_this.hasClass("active")){
         _this.removeClass("active");
         bus.removeClass("active");
         span.removeClass("chevron-right");
         span.addClass("chevron-left");
         _this.attr("title","展开");
         $("#map-legend").css("right","40px");
      }else{
         _this.addClass("active");
         bus.addClass("active");
         span.removeClass("chevron-left");
         span.addClass("chevron-right");
         _this.attr("title","收起");
         $("#map-legend").css("right","460px");
      }
   })
   getIndex();
});

function forSearch(){
    if (!isSupportCanvas()) {
      jAlert("请在chrome、safari、IE8+以上浏览器查看!");
      return false;
    }
    var year = $("#date1").attr("value");
   if(year==""){
      jAlert("考核年份不能为空！");
      return false;
   }
   //查询
   var loadi = layer.load('加载中…');       
   //清除所有覆盖物
   map.clearOverlays();
   var index=$("#indexId").val();
   var custType=$("#custType").val();
   var radius=$("#radius").val();
   var weight=$("#weight").val();
   console.log(radius);
   console.log(weight);
       $.ajax({
      url:"custAssessDistributionBaseCmd.cmd?method=forSearch",
      data:{"index":index,"year":year},
      type:"post",
      timeout:600000,
      dataType:"json",
      async: true,
      success: function(data, textStatus){
         isSelect = '1';
          if (document.createElement('canvas').getContext) {//判断当前浏览器是否支持绘制海量点              
             if (!isSupportCanvas()) {
                jAlert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~');
               return false;
              }
              let points = [];
              for (let i = 0; i < data.length; i++) {//过滤问题户类型
                if (data[i]['CUST_TYPE'] == '1' && custType.indexOf("1")!=-1) {
                  points.push(data[i]);
                } else if (data[i]['CUST_TYPE'] == '2' && custType.indexOf("2")!=-1) {
                  points.push(data[i]);
                } else if (data[i]['CUST_TYPE'] == '3' && custType.indexOf("3")!=-1) {
                  points.push(data[i]);
                } else if (data[i]['CUST_TYPE'] == '4' && custType.indexOf("4")!=-1) {
                  points.push(data[i]);
                }
              }
              console.log(points);
              heatmapOverlay = new BMapLib.HeatmapOverlay({ "radius": radius });
              map.addOverlay(heatmapOverlay);
              console.log(data);
              heatmapOverlay.setDataSet({ data: points, max: weight });
              heatmapOverlay.show();
              showManyPoint(data);        
          } else {
             jAlert('请在chrome、safari、IE8+以上浏览器查看!');
          }
          layer.close(loadi);
      },
      error: function(XMLHttpRequest,textStatus,mm){
         //请求出错处理
         jAlert("请求出错！错误类型="+textStatus);
      }
   });
}

function showManyPoint(data) {
    if (document.createElement('canvas').getContext) {  // 判断当前浏览器是否支持绘制海量点
       var custType=$("#custType").val();
       var wrongPoints = [];  // 问题户海量点数据
       var assessNotWrongPoints = [];  // 考核后无问题户海量点数据
       var transNotWrongPoints = []; // 整改后无问题户海量点数据
       var notAssessPoints = []; // 未参与考核海量点数据
        for (var i = 0; i < data.length; i++) {
          var point = new BMap.Point(data[i]['LNG'], data[i]['LAT']);
          point.custId = data[i]['CUST_ID'];
          point.CUST_NAME = data[i]['CUST_NAME'];
          point.BUSI_ADDR = data[i]['BUSI_ADDR'];
          point.ORDER_TEL = data[i]['ORDER_TEL'];
          point.SALE_DEPT_NAME = data[i]['SALE_DEPT_NAME'];
          point.SLSMAN_NAME = data[i]['SLSMAN_NAME'];
          if (data[i]['CUST_TYPE'] == '1'&& custType.indexOf("1")!=-1) {
            wrongPoints.push(point);
          } else if (data[i]['CUST_TYPE'] == '2'&& custType.indexOf("2")!=-1) {
            assessNotWrongPoints.push(point);
          } else if (data[i]['CUST_TYPE'] == '3'&& custType.indexOf("3")!=-1) {
            transNotWrongPoints.push(point);
          } else if (data[i]['CUST_TYPE'] == '4'&& custType.indexOf("4")!=-1) {
            notAssessPoints.push(point);
          }
        }
       createNewMap(wrongPoints,{
            color: '#FF0000'
        });
       createNewMap(assessNotWrongPoints,{
            color: '#FFFF00'
        });
       createNewMap(transNotWrongPoints,{
            color: '#FF8040'
        });
       createNewMap(notAssessPoints,{
            color: '#0000FF'
        });
    } else {
      jAlert('当前设备不支持使用本功能！');
    }
}

//显示客户信息
function openInfo(e){
   var content = "<b><span style='color:#FF8040'>"+e.point.CUST_NAME+"</span></b>"+
       "<br>地址:"+e.point.BUSI_ADDR+
       "<br>电话:"+e.point.ORDER_TEL+
       "<br>营销部:"+e.point.SALE_DEPT_NAME+
       "<br>客户经理:"+e.point.SLSMAN_NAME+"<br>";
       var opts = {
           offset:new BMap.Size(0, -20)    //设置文本偏移量
    };
   var point = new BMap.Point(e.point.lng, e.point.lat);
   var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
   map.openInfoWindow(infoWindow,point); //开启信息窗口
}

function createNewMap(points,options){
    var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
    pointCollection.addEventListener('mouseover', function (e) {
      openInfo(e);
    });
    pointCollection.addEventListener('mouseout', function (e) {
      map.closeInfoWindow();
    });
    pointCollection.addEventListener('click', function (e) {
       forDetail(e);
    });
    map.addOverlay(pointCollection);  // 添加Overlay
}

//判断浏览区是否支持canvas
function isSupportCanvas() {
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}

//小组名称帮助框
function getIndex(){
   $("#indexId").val("");
   $("#indexName").val("");//置空
    var comId=$("#comId").val();
    var year=$("#date1").val();
    var url = "CSI.COM_ID = '" + comId +"'" ;
    url += "AND COI.INDEX_ID IN ( SELECT DISTINCT (A.INDEX_ID) INDEX_ID FROM CRM_ASSESSMENT_CUST_DATA A WHERE A.WRONG_SCORE<=-0.00000001 AND A.WRONG_NUM>A.TRAN_NUM AND A.COM_ID = '" + comId +"'";
    url += "AND A.DATE1 = '" + year + "')";
    $("#indexIdHelp").commonHelp("CRM_ASSESS_INDEX_HELP","#indexId","WHERE="+url,{multiSelect:true},callBack1);
}
function callBack1(result){
   if(result.length == 1){
      for(var i=0;i<result.length;i++){
         $("#indexName").val(result[i]["INDEX_NAME"]);
      }
   }
}

function forDisplay(){
   if(isSelect == '0'){
      jAlert("请先进行查询操作");
      return;
   }
    heatmapOverlay.show();
}

function forClose(){
   if(isSelect == '0'){
      jAlert("请先进行查询操作");
      return;
   }
   heatmapOverlay.hide();
}

//筛选客户
function forDetail(e){
   var year=$("#date1").val();
   var url = "custAssessDistributionBaseCmd.cmd?method=forDetail&lng=" + e.point.lng + "&lat=" + e.point.lat + "&year=" + year;
   var iHeight = $(window).height()*0.95;
   var iWidth = $(window).width()*0.95;
   var iTop = (window.screen.availHeight);//获得窗口的垂直位置;
   var iLeft = (window.screen.availWidth);
   window.open(url,
      'new','width='+iWidth+',top='+iTop+',height='+iHeight+',left='+iLeft+',scrollbars=no,status=no,resizable=no');

}
</script>