更改信息窗口的位置显示在谷歌地图API v3中

Change the position of infoWindow appears in Google map API v3

本文关键字：谷歌地图 API v3 显示 位置 信息 信息窗 窗口      更新时间：2023-09-26

我正在为这个程序使用谷歌地图 api 版本 3。我正在尝试做的是更改鼠标悬停时显示的信息窗口的位置。目前它显示在标记上。我想更改位置以将其显示在标记图标的顶部。当我更换时 

 speedTest.infoWindow.setPosition(latlng);
 speedTest.infoWindow.open(speedTest.map);

这两行与以下行，

 speedTest.infoWindow.open(speedTest.map, this);

它正确显示在标记的顶部。 但是当我从侧项触发鼠标事件时，infoWindow将无法弹出。

    speedTest.showMarkers = function() {
  speedTest.markers = [];
  var type = 1;
  if ($('usegmm').checked) {
    type = 0;
  }
  if (speedTest.markerClusterer) {
    speedTest.markerClusterer.clearMarkers();
  }
  var panel = $('markerlist');
  panel.innerHTML = '';
  var numMarkers = $('nummarkers').value;
  for (var i = 0; i < numMarkers; i++) {
    var titleText = speedTest.pics[i].photo_title;
    if (titleText == '') {
      titleText = 'No title';
    }
    var item = document.createElement('DIV');
    var title = document.createElement('A');
    title.href = '#';
    title.className = 'title';
    title.innerHTML = titleText;
    item.appendChild(title);
    panel.appendChild(item);

    var latLng = new google.maps.LatLng(speedTest.pics[i].latitude,
        speedTest.pics[i].longitude);
    var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=' +
        'FFFFFF,008CFF,000000&ext=.png';
    var markerImage = new google.maps.MarkerImage(imageUrl,
        new google.maps.Size(24, 32));
    var marker = new google.maps.Marker({
      'position': latLng,
      'icon': markerImage
    });
    var fn = speedTest.markerClickFunction(speedTest.pics[i], latLng);
    google.maps.event.addListener(marker, 'click', fn);
    google.maps.event.addDomListener(title, 'click', fn);
    speedTest.markers.push(marker);
  }
  window.setTimeout(speedTest.time, 0);
};
speedTest.markerClickFunction = function(pic, latlng) {
  return function(e) {
    e.cancelBubble = true;
    e.returnValue = false;
    if (e.stopPropagation) {
      e.stopPropagation();
      e.preventDefault();
    }
    var title = pic.photo_title;
    var url = pic.photo_url;
    var fileurl = pic.photo_file_url;
    var infoHtml = '<div class="info"><h3>' + title +
      '</h3><div class="info-body">' +
      '<a href="' + url + '" target="_blank"><img src="' +
      fileurl + '" class="info-img"/></a></div>' +
      '<a href="http://www.panoramio.com/" target="_blank">' +
      '<img src="http://maps.google.com/intl/en_ALL/mapfiles/' +
      'iw_panoramio.png"/></a><br/>' +
      '<a href="' + pic.owner_url + '" target="_blank">' + pic.owner_name +
      '</a></div></div>';
    speedTest.infoWindow.setContent(infoHtml);
    speedTest.infoWindow.setPosition(latlng);
    speedTest.infoWindow.open(speedTest.map);
  };
};

这是我目前正在使用的完整代码：

speed_test_example.html

speed_test.js

创建标记时，可以指定信息窗口的定位位置，如下所示：

var marker = new google.maps.Marker({
  'position': latLng,
  'icon': markerImage,
  'anchorPoint': new google.maps.Point(x, y)
});
其中 x 和 y

是标记位置的 x 和 y 偏移量。

注意：google.maps.MarkerImage 不再使用。请改用图标。

相关文章：