Google Map自定义标记异常：第一个显示第二个不显示求助

嘿，我瞅见你代码里的问题啦！第二个标记的创建语句明显没写完，这就是它不显示的核心原因，咱们一步步来搞定：

1. 先补全未完成的Marker代码 #

你写的var HOMarker = n这部分完全不对，应该和第一个标记一样，用new google.maps.Marker()来实例化标记对象，这是语法上的硬伤，浏览器根本识别不了这个n是什么。

2. 修正后的完整代码 #

把没写完的部分补全，还要记得给第二个标记填正确的经纬度哦，完整的initMap函数应该是这样：

var tout;
function myFunction() {
  tout = setTimeout(initMap, 2500);
}
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 50.1821952, lng: 12.7067494}
  });

  // 第一个自定义标记
  var image = 'learn.png';
  var SCMarker = new google.maps.Marker({
    position: {lat: 50.1760219, lng: 12.6382292},
    map: map,
    icon: image
  });

  // 第二个自定义标记（已补全）
  var image2 = 'home.png';
  var HOMarker = new google.maps.Marker({
    // 这里替换成你需要的经纬度
    position: {lat: 50.180000, lng: 12.710000},
    map: map,
    icon: image2
  });
}

3. 额外要排查的细节 #

除了代码补全，还有几个点要确认：

• 图标文件路径是否正确：确保learn.png和home.png的位置和你的HTML/JS文件路径匹配，比如图片在assets文件夹里的话，路径要写成./assets/home.png。
• 经纬度是否有效：第二个标记的position必须是合法的经纬度数值，不然就算代码对了，标记也可能出现在地图可视范围之外，看起来像是没显示。
• Google Maps API是否正确加载：在你的HTML文件里，要确保正确引入了API脚本，并且密钥和回调函数对应，比如：

<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&callback=myFunction"></script>

按照上面的方法修改后，第二个标记应该就能正常显示在地图上啦！

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