JavaScript中多次执行坐标命令问题：重复代码无法运行

嘿，我一眼就看出问题啦！你代码跑不起来的核心原因是重复用let声明了同一个变量myString——在JavaScript里，let声明的变量属于块级作用域，同一个作用域下不允许重复声明同名变量，这直接触发了语法错误，导致代码无法执行。

下面给你两种解决方案，按需选择：

方案一：修改重复的变量名 #

最简单的办法就是给每个坐标组对应的URL变量起不同的名字，避免重复声明：

// 第一组坐标
let x = 38.041242, y = 23.679595;
let myString1 = `https://maps.googleapis.com/maps/api/streetview?location=${x},${y}&size=300x300&pitch=90`;
getBase64FromImageUrl(myString1);
console.log(x, y);

// 第二组坐标
let z = 38.041310, f = 23.679684;
let myString2 = `https://maps.googleapis.com/maps/api/streetview?location=${z},${f}&size=300x300&pitch=90`;
getBase64FromImageUrl(myString2);
console.log(z, f);

// 第三到第五组同理，依次使用myString3、myString4、myString5即可

方案二：用数组+循环批量处理（更优雅） #

如果要处理5组甚至更多坐标，重复写相同代码太繁琐，推荐用数组存储所有坐标对，通过循环批量执行操作，既避免变量重复声明，又让代码更简洁易维护：

// 把所有5组坐标存入数组，补充剩下3组即可
const coordinates = [
  [38.041242, 23.679595],
  [38.041310, 23.679684],
  // 示例补充另外3组
  [38.041400, 23.679700],
  [38.041500, 23.679800],
  [38.041600, 23.679900]
];

// 遍历每一组坐标执行操作
coordinates.forEach(([lat, lng]) => {
  // 生成街景图片URL，注意把&换成&（模板字符串里不需要HTML转义）
  const imageUrl = `https://maps.googleapis.com/maps/api/streetview?location=${lat},${lng}&size=300x300&pitch=90`;
  getBase64FromImageUrl(imageUrl);
  console.log(lat, lng);
});

额外小提示： #

你代码里的&是HTML的转义字符，在JavaScript模板字符串里不需要这么写，直接用&即可，否则生成的URL会包含&字符，可能导致请求无法正常工作哦。

内容的提问来源于stack exchange，提问作者Irini K.