附近景点
-
景点 1
-
景点 2
-
景点 3
// 初始化地图
const map = new google.maps.Map(document.getElementById('map'), {center: { lat: 0, lng: 0 },zoom: 15,
});// 定位当前位置
navigator.geolocation.getCurrentPosition((position) => {const pos = {lat: position.coords.latitude,lng: position.coords.longitude,};map.setCenter(pos);new google.maps.Marker({ map, position: pos });
});// 在地图上添加标记
const attractions = [{ lat: 1, lng: 2, name: '景点 1' },{ lat: 3, lng: 4, name: '景点 2' },{ lat: 5, lng: 6, name: '景点 3' },// ...
];
attractions.forEach((attraction) => {new google.maps.Marker({ map, position: attraction, title: attraction.name });
});
// 从 API 或其他数据源获取景点列表
const getAttractions = () => {// 这里实现从 API 或其他数据源获取景点列表的逻辑return [{ name: '景点 1', address: '地址 1' },{ name: '景点 2', address: '地址 2' },{ name: '景点 3', address: '地址 3' },// ...];
};// 根据景点列表生成 HTML 代码
const createAttractionsList = (attractions) => {let html = '
';attractions.forEach((attraction) => {html += `
-
${attraction.name}
`;});html += '
';return html;
};// 在页面上显示景点列表
const displayAttractions = () => {const attractionsList = createAttractionsList(getAttractions());document.getElementById('attractions').innerHTML = attractionsList;
};displayAttractions();
