bladex vue 整合百度地图标注示例,显示律师事务所、公证机构、仲裁机构所在的位置
需要到:https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/show 申请授权号

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>地图展示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
    body,
    html,
    #container {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
    }
    .info {
        z-index: 999;
        width: auto;
        min-width: 22rem;
        padding: .75rem 1.25rem;
        margin-left: 1.25rem;
        position: fixed;
        top: 1rem;
        background-color: #fff;
        border-radius: .25rem;
        font-size: 14px;
        color: #666;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }
    </style>
    <script src="bigScreen/4/js/jquery-3.2.0.min.js" charset="utf-8"></script>
    <script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=se3cgah4rx6pqWiv1fHPrpZCG2KtIL"></script>
</head>
<body>   
    <div class = "info">选择框 
        <input type="radio" class="radio" name="radio" value='0'>全部机构
        <input type="radio" class="radio" name="radio" value='1'>律师事务所
        <input type="radio" class="radio" name="radio" value='2'>公证机构
        <input type="radio" class="radio" name="radio" value='3'>仲裁机构</div> 
    <div id="container"></div>
</body>
</html>
<script>

var token = 'bearer ' + getToken() ;
var id =getID() ;
var type =getType() ;
$('.radio').click(function(){
    let href=window.location.href;
    if( $(this).val()=='0'){
      console.log("全部机构");
      console.log(href.substr(0,href.lastIndexOf("&"))+"&type=0")
      window.location.replace(href.substr(0,href.lastIndexOf("&"))+"&type=0")
    }else  if( $(this).val()=='1'){
      console.log("律师事物所");  
      window.location.replace(href.substr(0,href.lastIndexOf("&"))+"&type=1")
   }else  if( $(this).val()=='2'){
      console.log("公证机构");
      window.location.replace(href.substr(0,href.lastIndexOf("&"))+"&type=2")
    }else  if( $(this).val()=='3'){
      window.location.replace(href.substr(0,href.lastIndexOf("&"))+"&type=3")
    }   
})

$('document').ready(function () { 
      $.ajax({
          // 用ng代理后不用添加请求头
          headers: {
              'Blade-Auth': token,
          },
          async:false,
          //url: '/api/fvorg/falvorgtmp/'+id,
          url: '/api/fvorg/falvorgtmp/list?type='+type,
          type: 'GET',
          success: function (res) {
            genarateMap(res);        
          },
          error: function (res) {
              console.log(res)
          }
      })
})
  
function genarateMap(res){
   //var orgData=res.data;
   var orgData=res.data.records;
              var map = new BMapGL.Map('container'); // 创建Map实例
              for(j = 0,len=orgData.length; j < len; j++) {
                 // 开启鼠标滚轮缩放
                let longitude=orgData[j].longitude;              
                let latitude=orgData[j].latitude;
                // 初始化地图,设置中心点坐标和地图级别
                map.centerAndZoom(new BMapGL.Point(108.33, 22.84), 10);
                map.enableScrollWheelZoom(true);
                let orgName=orgData[j].orgName; 
                let tele=orgData[j].tele;
                let addr=orgData[j].addr; 
                var img=orgData[j].img; 
                let isFlag=false;
                if(orgData[j].id==id){                   
                   map.centerAndZoom(new BMapGL.Point(latitude, latitude), 10); // 初始化地图,设置中心点坐标和地图级别
                }
              
                //,这个是一点文字
                let point = new BMapGL.Point(longitude, latitude);
                // 创建点标记
                var marker = new BMapGL.Marker(point);
                // 在地图上添加点标记
                map.addOverlay(marker);
                // 创建信息窗口
                var opts = {
                  width: 200,
                  height: 100,
                  title: orgName,
                };
                let label = new BMapGL.Label(orgName, {       
                   position: point,
                   offset: new BMapGL.Size(5, 10)
                })  
                map.addOverlay(label);                        // 将标注添加到地图中
                label.setStyle({                              // 设置label的样式
                  color: '#000',
                  fontSize: '14px',
                  border: '1px solid #1E90FF'
                })
                var content = `<img style='float:right;margin:0 4px 22px' id='imgDemo' src='`+img+`'/>
    <p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>
        地址:`+addr+`,电话:`+tele+`
    </p></div>`;
                //let content="地址:"+addr+"<br>电话:"+tele;
                let infoWindow = new BMapGL.InfoWindow(
                  content,
                  opts
                );
                // 点标记添加点击事件
                marker.addEventListener("click", function () {
                  map.openInfoWindow(infoWindow, point); // 开启信息窗口
                });
              }  
}


// 创建文本标注,这个是一个大段文字
/*
var point = new BMapGL.Point(108.35, 22.83);
var content = '测试测试';
var label = new BMapGL.Label(content, {       
    position: point,
    offset: new BMapGL.Size(10, 20)
})  
map.addOverlay(label);                        // 将标注添加到地图中
label.setStyle({                              // 设置label的样式
    color: '#000',
    fontSize: '30px',
    border: '2px solid #1E90FF'
})
*/

  function getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("\?");
      for (var i=0;i<vars.length;i++) {
          var pair = vars[i].split("=");
          if(pair[0] == variable){
              return pair[1];
          }
      }
      return "";
  }
  
  function getToken() {
      var query = window.location.search.substring(1);   
      var vars1 = query.split("&");       
      var vars2 = vars1[1].split("=");     
      return vars2[1];      
  }
  function getID() {
      var query = window.location.search.substring(1);     
      var vars1 = query.split("&");       
      var vars2 = vars1[0].split("=");     
      return vars2[1];      
  }

  function getType() {
      var query = window.location.search.substring(1);     
      var vars1 = query.split("&");       
      var vars2 = vars1[2].split("=");     
      return vars2[1];      
  }

</script>