如何从HTML不同Div调用JavaScript函数，实现地图标记点击信息展示

我来帮你搞定这个需求，核心问题在于你原来用的document.write是页面初始化时执行的，没法响应后续的点击事件，咱们换个动态更新DOM的方式就行，具体步骤如下：

1. 给Marker添加自定义姓名属性 #

首先把你注释掉的姓名信息直接作为Marker的自定义属性存起来，这样点击时能直接拿到：

var marker = new google.maps.Marker({
  position: pos3,
  map: map,
  icon: "../images/RFlogo.png",
  // 直接添加自定义属性存储姓名
  name: "roger",
  lastname: "federer"
});

2. 修改标记点击事件，动态更新目标Div #

在点击事件回调里，获取second这个Div，然后直接修改它的内容，不用再用document.write：

marker.addListener('click', function () {
  // 获取目标div元素
  const secondDiv = document.getElementById('second');
  // 用模板字符串拼接内容，清晰又方便
  secondDiv.innerHTML = `Name: ${this.name}<br>Last name: ${this.lastname}`;
});

3. 调整第二个Div的初始结构 #

把原来secondDiv里的script去掉，换成友好的初始提示，避免页面加载时出现错误（毕竟原来的name和lastname在那个script里是未定义的）：

<div id="second">
  请点击地图上的标记查看姓名
</div>

完整修改后的代码整合 #

这里是调整后的完整HTML结构，你可以直接用：

<div id="first">
  <div id="map">
    <script type="text/javascript">
      // 保留你的Google地图初始化代码 [.. google map api code]
      var marker = new google.maps.Marker({
        position: pos3,
        map: map,
        icon: "../images/RFlogo.png",
        name: "roger",
        lastname: "federer"
      });

      marker.addListener('click', function () {
        const secondDiv = document.getElementById('second');
        secondDiv.innerHTML = `Name: ${this.name}<br>Last name: ${this.lastname}`;
      });
    </script>
  </div>
</div>

<div id="second">
  请点击地图上的标记查看姓名
</div>

关键知识点说明 #

• 为什么弃用document.write？它是页面加载阶段的API，页面加载完成后调用会清空整个页面，完全不适合局部更新内容的场景。
• Marker自定义属性：Google Maps允许给Marker对象添加自定义属性，点击事件里的this指向当前触发事件的Marker，所以能直接拿到我们存的姓名。
• innerHTML：用来动态修改元素内容，模板字符串（` `包裹）让HTML拼接更简洁易读。

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