init
This commit is contained in:
162
ruoyi-ui/public/baidu/marker.html
Normal file
162
ruoyi-ui/public/baidu/marker.html
Normal file
@@ -0,0 +1,162 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
#markercontainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#markercontainer .BMap_bubble_pop {
|
||||
border: 2px solid #2094ff !important;
|
||||
overflow: hidden;
|
||||
padding: 0 !important;
|
||||
}
|
||||
#markercontainer .BMap_bubble_top{
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
background-color: #2094ff !important;
|
||||
}
|
||||
#markercontainer .BMap_bubble_title {
|
||||
color: #fff !important;
|
||||
}
|
||||
#markercontainer .BMap_bubble_pop img{
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// 这里一定要配置ak 否则无法使用
|
||||
window.BMAP_AUTHENTIC_KEY = "t6k6UC2IZR40Un8kkqM4RXlaQb4FulyM"
|
||||
</script>
|
||||
|
||||
<script>
|
||||
const result = new URLSearchParams(window.location.search)
|
||||
const params = {}
|
||||
for (const [key, value] of result) {
|
||||
params[key] = value
|
||||
}
|
||||
if(params.NODE_ENV === 'production'){
|
||||
document.write('<link rel="stylesheet" type="text/css" href="./script/bmap.pro.css" />')
|
||||
document.write('<script type="text/javascript" src="./script/getscript.pro.js?type=webgl&v=1.0&services=&t=20230529114224"><\/script>')
|
||||
}else{
|
||||
document.write('<link rel="stylesheet" type="text/css" href="./script/bmap.css" />')
|
||||
document.write('<script type="text/javascript" src="./script/getscript.js?type=webgl&v=1.0&services=&t=20230529114224"><\/script>')
|
||||
}
|
||||
</script>
|
||||
<!-- <script type="text/javascript" src="./script/getscript.js?type=webgl&v=1.0&services=&t=20230529114224"></script> -->
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="markercontainer"></div>
|
||||
<script>
|
||||
window.parent['mapProps']('MAP_LOADING');
|
||||
var map = new BMapGL.Map('markercontainer', {
|
||||
backgroundColor: [192, 214, 213, 100]
|
||||
});
|
||||
map.enableScrollWheelZoom(true);
|
||||
window.parent['mapProps']('MAP_LOADING_FINISH');
|
||||
|
||||
// 点击点标记显示客户信息
|
||||
function createInfoWindowContent(record) {
|
||||
const div = document.createElement('div');
|
||||
const { point, title, id, ...otherRecord } = record;
|
||||
Object.keys(otherRecord).map(key => {
|
||||
let title = '';
|
||||
if (key === 'lpName') {
|
||||
title = '法人代表'
|
||||
} else if (key === 'ziben') {
|
||||
title = '注册资本'
|
||||
} else if (key === 'custScaleList') {
|
||||
title = '企业规模'
|
||||
} else if (key === 'isLoan') {
|
||||
title = '是否贷款'
|
||||
} else if (key === 'custPhone') {
|
||||
title = '联系电话'
|
||||
} else if (key === 'custTag') {
|
||||
title = '产品标签'
|
||||
}
|
||||
const divIn = document.createElement('div');
|
||||
div.style.cssText = 'color: #222; font-size: 12px; font-weight: bold; padding: 0 8px; text-align:left;';
|
||||
divIn.innerHTML = title;
|
||||
const span = document.createElement('span');
|
||||
span.style.cssText = 'color: #666; font-size: 12px; font-weight: normal;margin-left: 10px';
|
||||
span.innerHTML = otherRecord[key];
|
||||
divIn.appendChild(span);
|
||||
div.appendChild(divIn);
|
||||
});
|
||||
const btn = document.createElement('span');
|
||||
btn.style.cssText = 'display: inline-block; margin-left: 70px; cursor: pointer; padding: 0 10px; margin-top: 10px; color: #2094ff; border: 1px solid #2094ff; border-radius: 2px;';
|
||||
btn.innerHTML = '客户试图';
|
||||
btn.onclick = function() {
|
||||
window.parent['mapProps']('JUMP', record);
|
||||
}
|
||||
div.appendChild(btn);
|
||||
return div
|
||||
}
|
||||
|
||||
|
||||
function addPolygon(regionMapVO, selectedTab) {
|
||||
console.log(window.parant, regionMapVO)
|
||||
window.parent['mapProps']('MAP_LOADING');
|
||||
map.clearOverlays();
|
||||
|
||||
// const markerPoints = [
|
||||
// {
|
||||
// point: [116.404, 39.925],
|
||||
// custName: '临海市盛世木价家具厂',
|
||||
// lpName: '李爱国',
|
||||
// ziben: '500万',
|
||||
// custScaleList: '大型企业',
|
||||
// isLoan: '否',
|
||||
// custPhone: '15888884588',
|
||||
// custTag: '存款/中收',
|
||||
// id: 132
|
||||
// },
|
||||
// {
|
||||
// point: [116.404, 39.915],
|
||||
// custName: '临海市盛世木价家具厂1',
|
||||
// lpName: '李爱国1',
|
||||
// ziben: '500万1',
|
||||
// custScaleList: '大型企业1',
|
||||
// isLoan: '否',
|
||||
// custPhone: '15888884588',
|
||||
// custTag: '存款/中收1',
|
||||
// id: 133
|
||||
// }
|
||||
// ]
|
||||
if (regionMapVO.length <= 0) return;
|
||||
map.centerAndZoom(new BMapGL.Point(regionMapVO[0].latitude, regionMapVO[0].longitude), 12); // 设置地图中心
|
||||
regionMapVO.map(markerInfo => {
|
||||
// 创建点标记
|
||||
const point = new BMapGL.Point(markerInfo.latitude, markerInfo.longitude);
|
||||
const marker = new BMapGL.Marker(point);
|
||||
// 在地图上添加点标记
|
||||
map.addOverlay(marker);
|
||||
const opts = {
|
||||
width: 250,
|
||||
height: 200,
|
||||
title: markerInfo.title
|
||||
}
|
||||
const infoWindow = new BMapGL.InfoWindow(createInfoWindowContent(markerInfo), opts);
|
||||
marker.addEventListener('click', function() {
|
||||
map.openInfoWindow(infoWindow, point);
|
||||
});
|
||||
});
|
||||
window.parent['mapProps']('MAP_LOADING_FINISH');
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user