如何将 infoWindow 放在自定义标记的顶部？答案

【问题标题】：How can I put an infoWindow at the top of a custom marker?如何将 infoWindow 放在自定义标记的顶部？
【发布时间】：2015-01-24 10:57:23
【问题描述】：

这是我的代码演示：jsfiddle

我创建了一个自定义标记来代替谷歌标记。然后我想显示一个 infoWindow 包含标记位置的地址。但是 infoWindow 总是指向与自定义标记相同的位置。我希望它位于自定义标记的顶部（如this demo）。感谢阅读！

HTML：

<script src="http://maps.google.com/maps/api/js?libraries=places&region=uk&language=en&sensor=true"></script>
<div id="map_canvas" style="height: 350px;width: 500px;margin: 0.6em;"></div>

CSS：

.customMarker {
    position: absolute;
    cursor: pointer;
    background: #9acfea;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -110px;
    border-radius: 10px;
    padding: 0;
}

.customMarker:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 40px;
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #9acfea transparent;
    display: block;
    width: 0;
}

.friendsCustomMarker {
    position: absolute;
    cursor: pointer;
    background: #f57977;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -110px;
    border-radius: 10px;
    padding: 0;
}

.friendsCustomMarker:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 40px;
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #f57977 transparent;
    display: block;
    width: 0;
}

.customMarker img, .friendsCustomMarker img {
    width: 90px;
    height: 90px;
    margin: 5px;
    border-radius: 10px
}

JS：

【问题讨论】：

标签： google-maps google-maps-api-3 google-maps-markers marker

【解决方案1】：

你需要：

适当设置pixelOffset
设置信息窗口的位置

working jsfiddle

工作代码sn-p：

// Custom marker
function CustomMarker(latlng, map, imageSrc) {
  this.latlng_ = latlng;
  this.imageSrc = imageSrc;
  // Once the LatLng and text are set, add the overlay to the map.  This will
  // trigger a call to panes_changed which should in turn call draw.
  this.setMap(map);
}

CustomMarker.prototype = new google.maps.OverlayView();

CustomMarker.prototype.draw = function() {
  // Check if the div has been created.
  var div = this.div_;
  if (!div) {
    // Create a overlay text DIV
    div = this.div_ = document.createElement('div');
    // Create the DIV representing our CustomMarker
    div.className = "customMarker";


    var img = document.createElement("img");
    img.src = this.imageSrc;
    div.appendChild(img);
    /*google.maps.event.addDomListener(div, "click", function (event) {
     google.maps.event.trigger(me, "click");
     });*/

    // Then add the overlay to the DOM
    var panes = this.getPanes();
    panes.overlayImage.appendChild(div);
  }

  // Position the overlay
  var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
  if (point) {
    div.style.left = point.x + 'px';
    div.style.top = point.y + 'px';
  }
};

CustomMarker.prototype.remove = function() {
  // Check if the overlay was on the map and needs to be removed.
  if (this.div_) {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
  }
};

CustomMarker.prototype.getPosition = function() {
  return this.latlng_;
};
$(function() {
  var lat = 44.88623409320778,
    lng = -87.86480712897173,
    latlng = new google.maps.LatLng(lat, lng);

  var mapOptions = {
      center: new google.maps.LatLng(lat, lng),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      panControl: true,
      panControlOptions: {
        position: google.maps.ControlPosition.TOP_RIGHT
      },
      zoomControl: true,
      zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.TOP_left
      }
    },
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  marker = new CustomMarker(latlng, map, 'http://d33vud085sp3wg.cloudfront.net/hnmsBpTlK58BG3iOK3G4Cd5Iqlw/thumb.jpg');
  var infoWindow = new google.maps.InfoWindow();
  infoWindow.setContent('Here is an info window!');
  infoWindow.setPosition(latlng);
  infoWindow.setOptions({
    pixelOffset: new google.maps.Size(0, -110)
  });
  infoWindow.open(map);
});

.customMarker {
  position: absolute;
  cursor: pointer;
  background: #9acfea;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -110px;
  border-radius: 10px;
  padding: 0;
}
.customMarker:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 40px;
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: #9acfea transparent;
  display: block;
  width: 0;
}
.friendsCustomMarker {
  position: absolute;
  cursor: pointer;
  background: #f57977;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -110px;
  border-radius: 10px;
  padding: 0;
}
.friendsCustomMarker:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 40px;
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: #f57977 transparent;
  display: block;
  width: 0;
}
.customMarker img,
.friendsCustomMarker img {
  width: 90px;
  height: 90px;
  margin: 5px;
  border-radius: 10px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?libraries=places&region=uk&language=en&sensor=true"></script>
<div id="map_canvas" style="height: 350px;width: 500px;margin: 0.6em;"></div>

【讨论】：

【解决方案2】：

只需使用 pixelOffset 属性：

var infoWindow = new google.maps.InfoWindow({pixelOffset:new google.maps.Size(0, -100)});

【讨论】：