googleMaps中的markerWithLabel导致Infowindow远离markerClick显示

Question

我使用markerWithLabel.js作为我的自定义标记，当我点击标记时，infowindow显示距离我的标记位置有点远。

这是我的代码markerCode：

 var t = this;

 var m = new MarkerWithLabel({
        position: latlng,
        draggable: true,
        raiseOnDrag: true,
        icon: ' ',
        map: t.map.map,
        labelContent: '<i class="fa fa-circle fa-2x"  style="color:#8dc73f;height:22px;width:22px;"></i><i class="fa fa-arrow-up fa-stack-1x fa-inverse" style="transform: rotateZ(9deg);margin-top: 5px;"></i><i style="position:relative;margin-left:-19px;" class="fa fa-circle-o fa-2x"></i>',
        labelAnchor: new google.maps.Point(30, 0),
        labelClass: "labels", // the CSS class for the label
        labelStyle: { opacity: 0.75 }
    })

和infoWindow

   t.popup = new google.maps.InfoWindow({content: popup, closeButton: false, maxWidth: 365, maxHeight: 300, position: latlng});

    google.maps.event.addListener(m, 'click', function() {
        var content = _.template(CheckinTemplate, t.markerTemplateData(t.get('checkin')));
        t.popup.set('content', content);
        t.popup.open(t.map.map, m);
    });

这是否有任何问题，即使我为简单的自定义标记执行与markWithLabel js相同的问题

Answer 1

您实际上没有标记标记的图标。

icon: ' ',

因此，在使用时，API无法计算正确的pixelOffset：

infowindow.open(map, this);

改为设置infowindow的位置，并使用InfoWindow.open

的单参数版本

google.maps.event.addListener(markers[i], 'click', function(e) {
  infowindow.setContent('Marker postion: ' + this.getPosition());
  infowindow.setPosition(this.getPosition());
  infowindow.open(map);
});

updated fiddle

代码段

var globalMarker = [];
var map;

function initialize() {
  var center = new google.maps.LatLng(45.4214, -75.6919);

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: center,
    disableDoubleClickZoom: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var markers = [];


  var infowindow = new google.maps.InfoWindow();
  for (i = 0; i < 50; i++) {
    var latLng = new google.maps.LatLng(center.lat() + Math.random() - 0.5, center.lng() + Math.random() - 0.5);
    //var latLng = new google.maps.LatLng(45.4214, -75.6919)
    marker = new MarkerWithLabel({
      position: latLng,
      draggable: true,
      raiseOnDrag: true,
      map: map,
      icon: ' ',
      labelContent: '<i class="fa fa-circle fa-2x" style="color:#8dc73f;height:22px;width:22px;"></i><i class="fa fa-arrow-up fa-stack-1x fa-inverse" style="transform: rotateZ(9deg);margin-top: 5px;"></i><i style="position:relative;margin-left:-19px;" class="fa fa-circle-o fa-2x"></i>',
      labelAnchor: new google.maps.Point(45, 0),
      labelClass: "labels", // the CSS class for the label
      labelStyle: {
        opacity: 0.75
      }
    });
    markers.push(marker);

    makeDiv(i, 15, "Marker #");
    google.maps.event.addListener(markers[i], 'click', function(e) {
      infowindow.setContent('Marker postion: ' + this.getPosition());
      infowindow.setPosition(this.getPosition());
      infowindow.open(map);
    });
  }
  var clusterOptions = {
    zoomOnClick: false
  }
  var markerCluster = new MarkerClusterer(map, markers, clusterOptions);
  globalMarker = markers.slice();
  google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
    var content = '';

    // Convert lat/long from cluster object to a usable MVCObject
    var info = new google.maps.MVCObject;
    info.set('position', cluster.center_);

    //----
    //Get markers
    var markers = cluster.getMarkers();

    var titles = "";
    //Get all the titles
    for (var i = 0; i < markers.length; i++) {
      titles += markers[i].labelContent + "\n";
    }
    //----


    infowindow.close();
    infowindow.setContent(titles); //set infowindow content to titles
    infowindow.open(map, info);

    google.maps.event.addListener(map, 'zoom_changed', function() {
      infowindow.close()
    });

  });
}

function makeDiv(index, zoomLevel, content) {
  document.getElementById("sidebar").innerHTML += '<div onclick="zoomIn(' + index + ',' + zoomLevel + ')">' + content + ' ' + index + '</div>';
}

function zoomIn(index, zoomLevel) {
  map.setCenter(globalMarker[index].getPosition());
  map.setZoom(zoomLevel);
}

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

 html,
 body,
 #map {
   margin: 0;
   padding: 0;
   height: 100%
 }
 .labels {
   color: red;
   background-color: white;
   font-family: "Lucida Grande", "Arial", sans-serif;
   font-size: 10px;
   font-weight: bold;
   text-align: center;
   width: 90px;
   border: 2px solid black;
   white-space: nowrap;
 }

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn-history/r315/trunk/markerwithlabel/src/markerwithlabel_packed.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<div id="map"></div>
<div id="sidebar"></div>