Google Maps从数组调用自定义标记图标的API实现问题

我看你在尝试给Google Maps从数组添加自定义标记时，遇到了API无法调用Marker图标的问题，结合你给出的代码片段，我来帮你排查下问题并给出解决方案：

首先看你代码里的明显问题 #

你定义的icons数组里第二个图标URL是截断的（marker_purpl...），这肯定会导致图标加载失败，首先得把URL补全成完整的有效地址，比如对应的紫色标记完整路径应该是marker_purple.png这类的。

完整的修正示例代码 #

先确保你已经正确加载了Google Maps API（记得替换成你的API Key），然后结合你的button1函数，修正后的代码如下：

// 全局声明地图实例，确保button1函数能访问到
let map;

// 初始化地图的函数，页面加载时调用
function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 8,
    center: { lat: 39.9042, lng: 116.4074 }, // 示例中心坐标，可自行修改
  });
}

function button1(location) {
  // 提示用户输入坐标，最好明确提示是纬度和经度
  var latInput = prompt("输入纬度坐标");
  var lngInput = prompt("输入经度坐标");
  
  // 修正后的完整图标数组
  var icons = [
    "https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_green.png",
    "https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_purple.png"
  ];

  // 先验证用户输入的坐标是否为有效数字
  if (!isNaN(latInput) && !isNaN(lngInput)) {
    // 把输入转换成浮点数，创建坐标对象
    const markerPosition = new google.maps.LatLng(parseFloat(latInput), parseFloat(lngInput));
    
    // 创建自定义标记，这里用数组里的第一个图标，你也可以换成其他索引
    const customMarker = new google.maps.Marker({
      position: markerPosition,
      map: map,
      icon: icons[0] // 关键：从数组中指定图标URL
    });
  } else {
    alert("请输入有效的数字坐标哦！");
  }
}

几个关键注意点 #

• 地图实例的访问权限：button1函数要能访问到map实例，所以把map设为全局变量是最简单的方式，或者你也可以通过参数传递的方式传递地图实例。
• 图标URL必须完整有效：任何截断、拼写错误的URL都会导致图标加载失败，一定要确认每个图标地址都是能正常打开的。
• 正确设置icon属性：创建Marker时，直接将数组中的URL赋值给icon字段即可，Google Maps API会自动处理图标的加载。

如果想让用户自己选择用哪个图标，还可以加个简单的选择逻辑：

// 在验证坐标之后添加
var iconChoice = prompt("选择标记颜色：1=绿色，2=紫色");
if (iconChoice === "1" || iconChoice === "2") {
  const customMarker = new google.maps.Marker({
    position: markerPosition,
    map: map,
    icon: icons[parseInt(iconChoice) - 1] // 数组索引从0开始，所以减1
  });
} else {
  alert("请选择有效的图标序号！");
}

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