纯JavaScript加载本地JSON文件创建谷歌地图标记时出现语法错误的问题求助

嘿，我能理解你现在的困扰——之前用jQuery顺顺当当，换成纯JS加载JSON给谷歌地图加标记就踩坑了。先给你说清楚为啥会出现那个Uncaught SyntaxError: unexpected token: ':'错误：

你现在用的是JSONP的加载方式（通过创建script标签引入文件），但你的test.json是普通的JSON格式，不是JSONP。JSONP要求文件内容是一个回调函数调用，把JSON数据包在里面；而普通JSON直接放在script标签里的话，浏览器会把它当成JS代码执行，纯JSON的语法（比如开头的{）在JS里不是合法的语句，自然就会报冒号的语法错误。

给你两个可行的解决方案，选哪个看你的需求：

方案一：把JSON改成JSONP格式 #

直接修改你的test.json文件，把整个JSON数据包裹在你定义的eqfeed_callback函数调用里，像这样：

eqfeed_callback({
  "features" :[
    {
      "Latitudine":"45.47084",
      "Longitudine":"9.21033"
    },
    {
      "Latitudine":"45.4798289",
      "Longitudine":"9.2040963"
    },
    {
      "Latitudine":"45.48455",
      "Longitudine":"9.21542"
    },
    {
      "Latitudine":"45.4790683",
      "Longitudine":"9.2097079"
    }
  ]
})

改完之后，原来的加载逻辑就能正常工作了——script标签加载这个文件时，会直接调用你的eqfeed_callback函数，把数据传进去。

方案二：用Fetch API加载普通JSON（更推荐） #

JSONP其实是老技术了，现在更推荐用Fetch API来加载JSON，逻辑更清晰，也没有JSONP的跨域限制问题。你可以把原来创建script标签的代码删掉，换成下面的逻辑：

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: new google.maps.LatLng(45.4636707, 9.1881263),
    mapTypeId: "terrain",
  });

  // 用Fetch加载本地JSON文件
  fetch('test.json')
    .then(response => {
      // 先检查请求是否成功
      if (!response.ok) {
        throw new Error('加载JSON文件失败，请检查文件路径是否正确');
      }
      return response.json(); // 把响应转成JSON对象
    })
    .then(results => {
      // 循环创建标记，和你之前的逻辑一致
      for (let i = 0; i < results.features.length; i++) {
        // 注意：JSON里的坐标是字符串，要转成数字才能用
        const lat = parseFloat(results.features[i].Latitudine);
        const lng = parseFloat(results.features[i].Longitudine);
        const latLng = new google.maps.LatLng(lat, lng);
        
        new google.maps.Marker({
          position: latLng,
          map: map,
        });
      }
    })
    .catch(error => {
      // 捕获加载过程中的错误，方便调试
      console.error('加载过程出错：', error);
    });
}

这里要额外提醒一点：你的JSON里的Latitudine和Longitudine是字符串类型，必须用parseFloat转成数字，不然谷歌地图的LatLng构造函数会报错。

另外，如果你是直接双击HTML文件打开（用file://协议），Fetch可能会因为浏览器的CORS限制失败。这时候你需要用本地服务器来运行代码，比如：

• 用Python的话，在项目文件夹里运行python -m http.server
• 用Node.js的话，先安装http-server（npm install -g http-server），然后运行http-server
  这样就能正常加载本地JSON文件了。

备注：内容来源于stack exchange，提问作者GGKMNTN