如何获得偏移标记的真实中心点

Question

我认为以前没有人问过这个问题 - 我无法通过搜索 SO 和 Google 找到任何答案，而且我觉得这很奇怪，所以也许我忽略了一些东西..

无论如何，我正在创建一个基于 lat/lng 坐标的非常标准的一系列标记，尽管标记通常会“堆叠”在彼此之上，因为它们位于相同的 lat/lng 坐标。发生这种情况时，我们不希望对标记进行聚类，而是将它们偏移，以便它们并排显示。

我遇到的问题是，当我调用 marker.getPosition 来获取标记位置的 lat/lng 对象时，它没有考虑偏移量。它给出了标记在偏移之前放置位置的中心点的原始纬度/经度坐标。

有没有一种方法可以找到标记的 TRUE 中心点，同时考虑到它的偏移量？我知道偏移量是多少，如果有帮助的话。

这是我正在做的代码 sn-p

var marker = new google.maps.Marker({
    map:        obj.map,
    position:   latlng,
    icon:       {
        url:         obj.icon,
        size:        new google.maps.Size(72, 72),
        origin:      new google.maps.Point(0, 0),
        anchor:      new google.maps.Point(obj.offset_x, obj.offset_y),
        scaledSize:  new google.maps.Size(25, 25)
    },
    title: obj.title,
    zIndex: obj.zIndex
});

var latlng = marker.getPosition();

所以当我这样做时

var lat = latlng.lat();
var lng = latlng.lng();

似乎我得到了标记的位置，而不是代表标记的图标的偏移位置。有谁知道如何将图标的偏移位置作为 latlng 对象？

Answer 1

你可以计算位置：

overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
var markerPt = overlay.getProjection().fromLatLngToDivPixel(marker.getPosition());
var point = new google.maps.Point(markerPt.x - obj.offset_x + 12.5, markerPt.y - obj.offset_y + 25);

proof of concept fiddle

代码 sn-p：

var map;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
    });
  overlay = new google.maps.OverlayView();
  overlay.draw = function() {};
  overlay.setMap(map);

  var obj = {
    map: map,
    icon: "http://maps.google.com/mapfiles/ms/micons/blue.png",
    offset_x: 100,
    offset_y: 50,
    title: "marker",
    zIndex: 0
  }
  var latlng = {
    lat: 37.4419,
    lng: -122.1419
  };
  var marker = new google.maps.Marker({
    map: obj.map,
    position: latlng,
    icon: {
      url: obj.icon,
      size: new google.maps.Size(72, 72),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(obj.offset_x, obj.offset_y),
      scaledSize: new google.maps.Size(25, 25)
    },
    title: obj.title,
    zIndex: obj.zIndex
  });
  var center = new google.maps.Marker({
    map: map,
    position: latlng,
    icon: "http://maps.google.com/mapfiles/ms/micons/green.png",
    title: "center",
    draggable: true
  });
  google.maps.event.addListener(overlay, "projection_changed", function() {
    // if (!overlay.getProjection()) return;
    var markerPt = overlay.getProjection().fromLatLngToDivPixel(marker.getPosition());
    console.log("markerPt=" + markerPt.toString());
    // extra offset to bottom middle of marker (12.5, 25)
    var point = new google.maps.Point(markerPt.x - obj.offset_x + 12.5, markerPt.y - obj.offset_y + 25);
    console.log("point=" + point.toString());
    var latLng = overlay.getProjection().fromDivPixelToLatLng(point);
    console.log("latLng=" + latLng.toUrlValue(6));
    var newMark = new google.maps.Marker({
      map: map,
      position: latLng,
      icon: {
        url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
        size: new google.maps.Size(7, 7),
        anchor: new google.maps.Point(3.5, 3.5)
      }
    });
    var infowindow = new google.maps.InfoWindow();
    infowindow.setContent(newMark.getPosition().toUrlValue(6));
    infowindow.setOptions({
      pixelOffset: new google.maps.Size(0, -25)
    });
    infowindow.setPosition(newMark.getPosition());
    infowindow.open(map);
  });
  var latlng = marker.getPosition();
  console.log("latlng=" + latlng.toUrlValue(6));
  var infowindow = new google.maps.InfoWindow();
}

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

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>