Question

我认为以前没有问过这个问题 - 我通过搜索SO和谷歌找不到任何答案，我发现这有点奇怪所以也许我忽略了一些东西..

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

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

有没有办法可以找到标记的TRUE中心点，考虑其偏移量？我知道偏移是以像素为单位，如果这有帮助的话。

这是我正在做的事情的代码片段

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

代码段

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: