オフセットマーカーの本当の中心点を得る方法

Question

これは以前に尋ねられたとは思わない - 私はSOとGoogleを検索することでこれに対する答えを見つけることができず、この種の奇妙なことを私は見落としている

とにかく、緯度/経度座標に基づいてかなり標準的な一連のマーカーを作成していますが、マーカは同じ緯度/経度座標にあるため、 。このような状況が発生したときにマーカーをクラスタリングするのではなく、代わりにそれらをオフセットして並べて表示します。

私が持っている問題は、マーカーの位置のlat/lngオブジェクトを取得するためにmarker.getPositionを呼び出すときです。オフセットを考慮していません。マーカーがオフセットされる前の位置の中心点の元の緯度/経度座標を返します。

マーカのTRUE中心点を見つける方法はありますか？オフセットを考慮していますか？私はオフセットがピクセル単位で何かを知っています。ここで

は私が

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

を行うときに、私は、マーカーの位置、およびないのオフセット位置を取得するように、私は

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

をやっているのコードスニペットは、だから、それはそうですマーカーを表すアイコン。誰も私は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

コードスニペット：

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>

を