读取JSON中服务经纬度并实现驾车路线展示的技术问询

嘿，看起来你正在做一个整合城市服务信息的Web应用对吧？结合你给出的services.json片段，我来分享下具体的实现思路和代码示例，帮你搞定从读取JSON到展示服务再到生成驾车路线的全流程：

首先得把服务数据从JSON文件里加载进来，前端后端的实现方式略有不同：

前端（浏览器环境）用Fetch API读取 #

async function loadServices() {
  try {
    // 确保services.json路径和当前页面正确关联
    const response = await fetch('./services.json');
    const services = await response.json();
    renderServicesToMasterPage(services); // 拿到数据后渲染到母版页
  } catch (error) {
    console.error('加载服务数据出错啦:', error);
  }
}

后端（Node.js环境）读取 #

如果是后端渲染母版页，用Node.js的文件系统模块：

const fs = require('fs').promises;

async function getServicesData() {
  try {
    const rawData = await fs.readFile('./services.json', 'utf8');
    return JSON.parse(rawData);
  } catch (error) {
    console.error('读取JSON文件失败:', error);
    return []; // 返回空数组避免后续报错
  }
}

拿到服务数据后，把它转换成可点击的列表项，让用户能直观看到服务信息：

母版页HTML容器 #

<!-- 母版页里专门放服务列表的容器 -->
<div id="services-list" class="service-grid"></div>

前端渲染逻辑 #

function renderServicesToMasterPage(services) {
  const container = document.getElementById('services-list');
  // 遍历服务数据，生成每个服务的DOM元素
  container.innerHTML = services.map(service => `
    <div class="service-card" onclick="navigateToServicePage(${service.id})">
      <h3>${service.ser}</h3>
      <p>📍 服务地点: ${service.Location} / ${service.SecondLoc}</p>
      <p>📞 ${service.Phone}</p>
    </div>
  `).join('');
}

// 点击服务后的跳转函数
function navigateToServicePage(serviceId) {
  // 把服务ID作为URL参数传递到服务详情页
  window.location.href = `service-detail.html?serviceId=${serviceId}`;
}

用户跳转到服务页后，先根据URL参数拿到对应服务的详情，再调用地图工具生成驾车路线：

服务页核心逻辑 #

async function loadServiceDetails() {
  // 从URL里提取服务ID
  const urlParams = new URLSearchParams(window.location.search);
  const serviceId = parseInt(urlParams.get('serviceId'));
  
  // 复用之前的加载函数获取全部服务数据
  const allServices = await loadServices();
  const targetService = allServices.find(service => service.id === serviceId);
  
  if (!targetService) {
    document.getElementById('service-content').innerHTML = '<p>抱歉，找不到对应的服务信息</p>';
    return;
  }

  // 渲染服务详情
  document.getElementById('service-content').innerHTML = `
    <h2>${targetService.ser}</h2>
    <div class="info-group">
      <p><strong>主要地点:</strong> ${targetService.Location}</p>
      <p><strong>备用地点:</strong> ${targetService.SecondLoc}</p>
      <p><strong>联系电话:</strong> ${targetService.Phone}</p>
      <p><strong>邮箱:</strong> ${targetService.email}</p>
    </div>
  `;

  // 生成驾车路线
  generateDrivingRoute(targetService.sourceLat, targetService.sourceLong);
}

// 生成驾车路线（以嵌入谷歌地图为例）
function generateDrivingRoute(serviceLat, serviceLng) {
  // 先获取用户当前位置
  navigator.geolocation.getCurrentPosition(
    position => {
      const userLat = position.coords.latitude;
      const userLng = position.coords.longitude;
      // 生成地图导航链接并嵌入iframe
      const mapIframe = `
        <iframe 
          src="https://www.google.com/maps/dir/${userLat},${userLng}/${serviceLat},${serviceLng}" 
          width="100%" 
          height="450px" 
          frameborder="0" 
          allowfullscreen>
        </iframe>
      `;
      document.getElementById('route-container').innerHTML = mapIframe;
    },
    error => {
      console.error('获取用户位置失败:', error);
      // 位置获取失败时给用户备选方案
      document.getElementById('route-container').innerHTML = `
        <p>无法自动获取您的位置，请<a href="https://www.google.com/maps/search/${serviceLat},${serviceLng}" target="_blank">点击这里手动查询路线</a></p>
      `;
    }
  );
}

// 页面加载时自动执行
window.onload = loadServiceDetails;

• 确保services.json的文件路径正确，跨域环境下要配置好CORS规则
• 如果使用第三方地图API（比如谷歌、百度），记得提前申请对应的API密钥，避免访问受限
• 要处理各种异常情况：JSON加载失败、服务ID不存在、用户拒绝位置权限等
• 传递服务ID时最好做合法性校验，防止恶意参数注入

内容的提问来源于stack exchange，提问作者Anjali