如何獲得偏移標記的真正中心點

Question

我不認爲這已經被問到過 - 我無法通過搜索SO和Google找到任何答案，我發現這種奇怪的，所以也許我俯瞰東西..

無論如何，我創建了一個基於緯度/經度座標的非常標準的一系列標記，雖然很多時候標記會「疊」在一起，因爲它們在相同的經度/座標上。當發生這種情況時，我們不打算將這些標記聚集在一起，而是將它們抵消掉，以便它們並排出現。

雖然我遇到的問題是當我調用marker.getPosition獲取標記位置的緯度/經度對象時，它沒有考慮到偏移量。它給出了偏移前標記放置位置中心點的原始經緯度座標。

有沒有一種方法可以找到標記的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

代碼片段：

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>