如何通过Google Maps API将Ajax获取的图片替代Marker显示在指定坐标（无需InfoWindow）

嘿，这个需求其实很好实现！Google Maps JavaScript API 本身就支持直接给 Marker 设置自定义图标，完全不需要借助 InfoWindow 来展示图片。我结合你的数据给你写个具体的实现方案：

首先先修正下你提供的 Ajax 数据格式（原格式有点小问题，改成可遍历的结构会更方便）：

const restaurants = [
  { latlng: ["40.7143528","-74.0059731"], link: "restaurant1.jpg" },
  { latlng: ["40.82148067","-74.35135579"], link: "restaurant2.jpg" }
];

接下来，核心就是在创建 Marker 时，通过 icon 配置项直接指定你的餐厅图片作为 Marker 图标，而不是用默认的红色标记。这里可以设置图片的尺寸、锚点（确保图片精准定位在坐标上）：

// 先初始化地图（假设你已经有了map实例）
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: 40.7831, lng: -74.0057 } // 纽约区域中心，可根据需求调整
  });

  // 遍历餐厅数据创建自定义Marker
  restaurants.forEach(rest => {
    const latLng = new google.maps.LatLng(parseFloat(rest.latlng[0]), parseFloat(rest.latlng[1]));
    
    const customMarker = new google.maps.Marker({
      position: latLng,
      map: map,
      // 重点：设置自定义图标
      icon: {
        url: rest.link, // 你的餐厅图片地址
        scaledSize: new google.maps.Size(50, 50), // 图片显示的尺寸（宽高，单位px）
        anchor: new google.maps.Point(25, 25) // 锚点：图片的中心位置对应坐标点，避免偏移
        // 如果希望图片底部中点对应坐标，anchor可以设为new google.maps.Point(25,50)
      }
    });
  });
}

关键说明： #

• scaledSize：用来控制图片显示的大小，避免原图过大撑满地图。可以根据你的图片实际尺寸调整数值。
• anchor：这个很重要！默认情况下Marker的锚点是图标底部中心，如果你的图片是不规则形状或者你想让坐标点对应图片的某个位置，一定要设置这个参数。比如上面的例子把锚点设为图片中心（25,25），这样坐标点就会精准落在图片中间。
• 跨域问题：如果你的图片是来自其他域名的资源，要确保服务器配置了CORS允许访问，否则地图可能加载不出来图片。

这样一来，每个餐厅的坐标上就会直接显示你指定的图片，完全替代默认Marker，不需要点击或者InfoWindow啦！

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