查找附近维修点位置 (查找附近维修钟表店)

成都品茶 04-09 阅读:55 评论:0
查找附近维修点位置 (查找附近维修钟表店)

请输入您的位置以查找附近的维修钟表店:

javascript // script.js const form = document.getElementById('form'); const results = document.getElementById('results');form.addEventListener('submit', (e) => {e.preventDefault();const location = document.getElementById('location').value;// 使用 Google Places API 查找附近维修钟表店const request = {query: '钟表维修店',location: location,radius: 5000, // 搜索半径为 5 公里};const service = new google.maps.places.PlacesService(document.createElement('div'));service.textSearch(request, (response, status) => {if (status === google.maps.places.PlacesServiceStatus.OK) {displayResults(response.results);} else {alert('出错了!请重试。');}}); });function displayResults(results) {results.forEach((result) => {// 创建结果元素const resultElement = document.createElement('div');resultElement.classList.add('result');// 添加名称和地址const name = document.createElement('h3');name.textContent = result.name;resultElement.appendChild(name);const address = document.createElement('p');address.textContent = result.formatted_address;resultElement.appendChild(address);// 添加按钮以显示详情const detailsButton = document.createElement('button');detailsButton.textContent = '显示详情';detailsButton.addEventListener('click', () => {// 打开详细信息窗口const infoWindow = new google.maps.InfoWindow({content: result.name + '
' + result.formatted_address + '
' + result.formatted_phone_number,});// 创建地图标记const marker = new google.maps.Marker({position: result.geometry.location,map: map,});// 打开信息窗口infoWindow.open({anchor: marker,map,});});resultElement.appendChild(detailsButton);// 添加结果元素到结果容器中results.appendChild(resultElement);}); }
版权声明

本文仅代表作者观点,不代表成都桑拿立场。
本文系作者授权发表,未经许可,不得转载。