Question

> <script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    marker = new google.maps.Marker({
    position : latlng,
    title : "hello world",
    draggable : true
    });
   marker.setMap(map)
  }
  function write(){
    //var positon = marker.getPosition()
    alert('position')
  }
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
  <input type='button' value ='position' onClick="write()">
</body>
</html>

每当我点击名为“位置”的按钮时，地图就会消失，为什么会这样呢？

Answer 1

+1 Jens的回答是正确的。但是说write通常不应该给你document.write。 window属性充当全局变量，但document属性不起作用：

function write(){
    alert('position')
}

mybutton.onclick= function() {
    write(); // this is fine!
};

诀窍在于，当您编写内联事件处理程序属性时，该元素及其祖先元素的属性将被转储到您的范围中。我不确定这实际上是在任何地方记录的，当然确切的行为会因浏览器而异，但它是一个古老的，完善的，非常危险的功能：

<input onclick="alert(value);" value="A"/>  // alerts A

<form method="get"><input onclick="alert(method)"/></form> // alerts get

因为document是页面中所有DOM节点的顶级祖先，

<div onclick="alert(write)"/> // alerts the `document.write` function

这意味着您不能引用内联事件处理程序属性中的任何全局变量或函数，该属性恰好与祖先节点的成员具有相同的名称。而且由于新版本的浏览器一直在发布，引入新的DOM属性，任何使用任何全局变量或函数在事件处理程序属性中可能会破坏将来

这是我们从不使用内联事件处理程序属性的另一个原因。

[所有这些示例都假设alert解析为window.alert，即没有人碰巧在任何祖先DOM节点上放置alert属性...] < / p>

Answer 2

write（）是一个保留的Javascript函数 - 当你调用它时，你正在执行document.write（）（因为你在文档已经完成写完之后调用它）会重写整个页面。

尝试将其重命名为myWrite（）。

消失的谷歌地图

2 个答案: