脚本：script.js
javascript
const map = document.getElementById('map');
const legend = document.getElementById('legend');
const search = document.getElementById('search');
const results = document.getElementById('results');// 创建图例
const colors = ['red', 'blue', 'green'];
const labels = ['待售', '在售', '已售'];
for (let i = 0; i < colors.length; i++) {const swatch = document.createElement('div');swatch.classList.add('color-swatch', colors[i]);const label = document.createElement('span');label.textContent = labels[i];legend.appendChild(swatch);legend.appendChild(label);
}// 获取楼盘数据
const data = [{name: '锦绣城',district: 'jinjiang',status: '待售',price: 2000000},{name: '天府新城',district: 'gaoxin',status: '在售',price: 3000000},{name: '华府天地',district: 'wuhou',status: '已售',price: 4000000},// 其他楼盘数据...
];// 过滤楼盘数据
function filterData(data,criteria) {let filteredData = data;if (criteria.name) {filteredData = filteredData.filter(item => item.name.includes(criteria.name));}if (criteria.district && criteria.district !== 'all') {filteredData = filteredData.filter(item => item.district === criteria.district);}if (criteria.price) {filteredData = filteredData.filter(item => item.price <= criteria.price);}return filteredData;
}// 显示搜索结果
function displayResults(data) {results.innerHTML = '';if (data.length === 0) {const message = document.createElement('li');message.textContent = '没有找到符合条件的楼盘。';results.appendChild(message);} else {for (let i = 0; i < data.length; i++) {const result = document.createElement('li');const name = document.createElement('span');name.textContent = data[i].name;const district = document.createElement('span');district.textContent = data[i].district;const status = document.createElement('span');status.classList.add('status', data[i].status);status.textContent = data[i].status;const price = document.createElement('span');price.textContent = data[i].price + ' 元';result.appendChild(name);result.appendChild(district);result.appendChild(status);result.appendChild(price);results.appendChild(result);}}
}// 添加搜索事件监听器
search.addEventListener('submit', (event) => {event.preventDefault();const criteria = {name: event.target.querySelector('input[name="name"]').value,district: event.target.querySelector('select[name="district"]').value,price: parseInt(event.target.querySelector('input[name="price"]').value)};const filteredData = filterData(data, criteria);displayResults(filteredData);
});
