官网文档搜索 ： 百度API开发平台
总共需要vnc中的服务端打开，有html、Ajax、css、js
html:
<!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">
<meta name="referrer" content="no-referrer"> <!-- 解决网络图片在其他服务器中不显示的问题 -->
<title>百度"</title>
</head>
<link rel="stylesheet" href="./css.css">
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=Xa1qXlAh3xkVnlcjmSX7cNu15fgR1FN6"></script>
<!-- 引入Ajax 封装好的 -->
<script src="./ajax.js"></script>
<body>
<div id="allmap"></div>
<div class="house">
<div class="nav">暂时没有数据</div>
<div class="menu">暂时没有数据</div>
<div class="menus">暂时没有数据</div>
<div class="contents">
<!-- <div class="house-left">
<div class="house-img">
<img src="https://ke-image.ljcdn.com/110000-inspection/pc1_GHHBi4uQU_2.jpg.210x164.jpg?from=ke.com">
</div>
</div>
<div class="house-right">
<div class="house-right-item">
<div class="title">紫竹桥、西三环北路89号院、二居室 精装修</div>
<div class="title2">2室1厅/50.75㎡/西 北/西三环北路89</div>
<div class="VR-introduce">满五年</div>
<div class="Price"><span><i style="color: red;">513万</i> <i
style="font-size: 12px;">101084元/平</i></span></div>
</div>
</div> -->
</div>
<div class="no-moreData">没有更多房源了</div>
</div>
</body>
<script type="text/javascript">
// 获取当前 元素
var content = document.querySelector(".house .contents")
var house = document.querySelector(".house")
var map = new BMapGL.Map("allmap");
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var myGeo = new BMapGL.Geocoder();//创建地址解析器实例 将地址转化成经纬度
// 将地址解析结果显示在地图上，并调整地图视野
myGeo.getPoint('北京市海淀区上地10街', function (point) { // point 经纬度
if (point) {
// 因为坐标是实时更新的，所以单独提取出来
const { lng, lat } = point;
map.centerAndZoom(new BMapGL.Point(lng, lat), 11); // 初始化地图，设置中心点坐标
// 添加控件
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
map.addControl(cityCtrl);
// 画标注
const DrawMark = (item) => {
// 数据拿出来
const { coord: { longitude, latitude }, text, count, value, TownList, AreaList, Areaitem, title, title2, VR, Price, Land } = item
var point = new BMapGL.Point(longitude, latitude); // 同步坐标
var label = new BMapGL.Label('', { // 创建文本标注
position: point, // 添加标注的位置
offset: new BMapGL.Size(-35, -35) // 添加位置偏移量
})
map.addOverlay(label); // 将文本标注添加到地图中
// 设置label的样式
const labelStyle = {
cursor: 'pointer',
border: '0px solid rgb(255,0,0)',
padding: '0px',
whiteSpace: 'nowrap',
fontSize: '12px',
textAlign: 'center',
color: 'rgb(255,255,255)'
}
// setContent 专门添加html标签的
label.setContent(`
<div class="bubble">
<p class="name">${text}</p>
<p>${count}套</p>
</div>
`)
label.setStyle(labelStyle);
return {
label,
value,
longitude,
latitude,
TownList,
AreaList,
text,
count,
Areaitem,
title,
title2,
VR,
Price,
Land
}
}
// 封装 绘画画出边界线
const DrawArea = (label, value) => {
const MapArr = value.split(';')
const MapList = []
for (let i = 0; i < MapArr.length; i++) {
let [lng, lat] = (MapArr[i]).split(',')
MapList.push(new BMapGL.Point(lng, lat))
}
// 绘制面
var polygon = new BMapGL.Polygon(MapList, { // 绘制的面 写经纬度
strokeColor: 'blue', // 线的颜色
strokeWeight: 2, // 线的粗细
strokeOpacity: 0.5 // 线的透明度
});
// 当前加入 移入事件
label.addEventListener('mouseover', () => {
map.addOverlay(polygon); // 添加到地图中
})
// 当前加入 移出事件
label.addEventListener('mouseout', () => {
map.removeOverlay(polygon); // 添加到地图中
})
}
// 画17各区 标注
// 1.使用自制性匿名函数获取17个区的数据
; (async function () {
const data = JSON.parse(await ajax('./MapData.json', 'get')); // 获取17个区的数据
// console.log(data);
data.forEach((item) => {
// 画所有的标注
const { label, value, longitude, latitude, TownList, Areaitem, title, title2, VR, Price, Land } = DrawMark(item)
// 画所有的区
DrawArea(label, value);
// 给所有的加点击事件
label.addEventListener("click", () => {
// 按照当前标注点进行放大
map.centerAndZoom(new BMapGL.Point(longitude, latitude), 13);
// 清除所有的标注
map.clearOverlays();
// 画所有的小镇
TownList.forEach((con) => {
// 画所有的标注
const { label, value, longitude, latitude, AreaList, text, count, Areaitem, title, title2, VR, Price, Land } = DrawMark(con)
// 画所有的区
DrawArea(label, value);
label.addEventListener("click", () => {
// 按照当前标注点进行放大
map.centerAndZoom(new BMapGL.Point(longitude, latitude), 13);
// 清除所有的标注
map.clearOverlays();
AreaList.forEach((rea) => {
// 画所有的标注
const { label, value, longitude, latitude, AreaList, text, count, Areaitem, title, title2, VR, Price, Land } = DrawMark(rea)
map.centerAndZoom(new BMapGL.Point(longitude, latitude), 16);
label.setContent(`
<div class="community">${text} | ${count}套 <i></i></div>
`)
label.addEventListener("click", () => {
var str = ''
house.style.display = "block";
rea.Areaitem.forEach((items) => {
var { title, title2, VR, Price, Land } = items
str +=
`
<div class="content">
<div class="house-left">
<div class="house-img">
<img src="https://ke-image.ljcdn.com/110000-inspection/pc1_GHHBi4uQU_2.jpg.210x164.jpg?from=ke.com">
</div>
</div>
<div class="house-right">
<div class="house-right-item">
<div class="title">${title}</div>
<div class="title2">${title2}</div>
<div class="VR-introduce">${VR}</div>
<div class="Price"><span><i style="color: red;">${Price}</i>
<i style="font-size: 12px;">${Land}</i></span></div>
</div>
</div>
</div>
`
})
content.innerHTML = str
})
})
})
})
})
});
})();
} else {
alert('您选择的地址没有解析到结果！');
}
}, '北京市')
</script>
</html>ajax:
function ajax(url, type) {
var oAjax = new XMLHttpRequest();
oAjax.open(type, url, true);
oAjax.send();
return new Promise((resolve, reject) => {
oAjax.onreadystatechange = function () {
if (oAjax.readyState == 4) {
if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) {
resolve(oAjax.responseText);
} else {
reject(oAjax.status);
}
}
}
})
}css:
body,
html,
#allmap {
height: 100%;
}
i {
font-style: normal;
}
p {
margin: 0;
}
#allmap {
width: 100%;
height: 100%;
}
.bubble {
width: 70px;
height: 70px;
line-height: 1;
position: absolute;
top: 0;
left: 0;
background-color: rgba(12, 181, 106, 0.9);
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 100%;
text-align: center;
cursor: pointer;
}
.name {
padding: 18px 0 6px 0;
}
.community {
position: absolute;
background: #00ae66;
padding: 2px 12px;
color: #fff;
border-radius: 15px;
font-family: PingFangSC-Medium;
font-size: 12px;
letter-spacing: 0;
height: 28px;
line-height: 28px;
}
.community i {
border: 5px solid transparent;
border-top-color: #00ae66;
display: block;
width: 0;
height: 0;
margin: 3px auto 0;
transition: all .15s ease-in-out;
}
.house {
width: 375px;
height: 70vh;
overflow-y: hidden;
background: #fff;
max-height: calc(100vh - 120px);
box-shadow: 0px 0px 9px 10px rgb(0 0 0 / 10%);
border-radius: 10px;
position: absolute;
top: 88px;
left: 24px;
z-index: 9;
transition: top .5s;
display: none;
}
.house .nav {
width: 100%;
height: 50px;
}
.house .menu {
width: 100%;
height: 50px;
}
.house .menus {
width: 100%;
height: 40px;
}
.nav,
.menu,
.menus {
text-align: center;
font-size: 12px;
border-bottom: 1px solid rgb(202, 202, 202);
}
.contents {
width: 100%;
}
.house .content {
width: 100%;
height: 120px;
display: flex;
/* align-items: center; */
justify-content: space-evenly;
font-size: 12px;
padding-top: 20px;
border-bottom: 1px solid #ccc;
}
.house .content .house-left {
width: 105px;
height: 80px;
}
.house-left .house-img {
width: 105px;
height: 80px;
}
.house-left .house-img img {
width: 105px;
height: 80px;
}
.house-right {
width: 215px;
height: 80px;
}
.house-right .title {
font-size: 16px !important;
}
.house-right .title2 {
font-size: 12px !important;
padding: 2px 0;
}
.house-right .title2 {
/*第一步： 溢出隐藏 */
overflow: hidden;
/* 第二步：让文本不会换行， 在同一行继续 */
white-space: nowrap;
/* 第三步：用省略号来代表未显示完的文本 */
text-overflow: ellipsis;
}
.VR-introduce {
font-size: 14px;
padding: 2px 0;
}
.Price {
font-size: 20px;
}
.house-right .title .house-right .house-right-item {
width: 215px;
height: 80px;
}
.no-moreData {
font-family: PingFangSC-Regular;
font-size: 12px;
color: #666;
text-align: center;
padding: 30px 0;
}
5493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
