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>
