使用Google Maps JS v3跟踪鼠标的Infowindow?

时间:2015-05-13 20:58:51

标签: javascript google-maps-api-3

可以创建一个跟随鼠标的信息窗口吗?最好偏移到鼠标指针的右上角。

function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var contentString = 'follow mouse';

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

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

1 个答案:

答案 0 :(得分:2)

在initialize()函数的末尾添加它会使infowindow跟随鼠标。

google.maps.event.addListener(map,'mousemove',function(event){
    infowindow.setPosition(event.latLng);
});

将param pixelOffset添加到infowindow函数会将其偏移到右上角。

var infowindow = new google.maps.InfoWindow({
  content: contentString,
  pixelOffset: new google.maps.Size(10,-10)
});