Question

我只是想根据不同div元素的Mouseover事件加载Google Maps。为此，我使用了以下简单代码。这段代码本身不起作用，有人可以告诉我我犯了什么错误吗？

<script type="text/javascript">

  function initialize() {
    var mapDiv = document.getElementById('map-canvas');
    var map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(40.740, -74.18),
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var content = '<strong>A info window!</strong><br/>That is bound to a marker';

    var infowindow = new google.maps.InfoWindow({
      content: content
    });

    var marker = new google.maps.Marker({
      map: map,
      position: map.getCenter(),
      draggable: true
    });

    infowindow.open(map, marker);
  }

  google.maps.event.addDomListener($("#showmap"), 'mouseover', function(){ alert("Hi");});
</script>


<div id='showmap'>
  Show Map
</div>
<div id="map-canvas" style="width: 500px; height: 400px"></div>

以上简单的警报功能本身并不需要这个简单的代码。

Answer 1

选择器返回jQuery对象，并且可以使用[0]直接从元素数组访问所需元素。另外，将其设为“addDomListenerOnce”，只需要初始化一次。

$("#showmap")[0]

see a demo

google.maps.event.addDomListenerOnce($("#showmap")[0], 'mouseover', 
                                 function(){ initialize(); });

Answer 2

我只是尝试使用它，这也很有用。

Java脚本代码：

  function initialize(lat,longit,content) {
    var mapDiv = document.getElementById('map-canvas');
    var map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(lat, longit),
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });


    var infowindow = new google.maps.InfoWindow({
      content: content
    });

    var marker = new google.maps.Marker({
      map: map,
      position: map.getCenter(),
      draggable: false
    });

    infowindow.open(map, marker);
  }

Html代码：

 <div id='showmap' onclick="initialize(1.37422,103.945,'<h2>Tampines</h2>')">
  Show Map
</div>

我刚尝试使用java中的一个想法，我们可以尝试从onclick调用方法并检查它是否正常工作，令我惊讶的是它有效。

如何为Google Maps的addDOMListener添加操作？

2 个答案: