我正在使用谷歌地图。我想在标记点击时显示自定义信息窗口。为此，我的自定义信息窗口的左上角应覆盖标记。
问题在于，我无法获取标记在地图上的精确（x，y）即地图div位置。第一次可以使用以下方法获得：
var mposition = map.fromLatLngToDivPixel(marker.getLatLng());
pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(mposition.x,mposition.y));
var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
var proj = overlay.getProjection();
var pos = marker.getPosition();
var p = proj.fromLatLngToContainerPixel(pos);
现在您可以通过p.x和p.y访问您的像素坐标。
或者，您可以尝试将fromLatLngToDivPixel更改为fromLatLngToContainerPixel。在移动或操纵地图周围的任何内容之前，这两个函数都将返回相同的值，但在平移地图后，DivPixel函数将返回相对于其原始位置的更新值，即：+x / +y像素。ContainerPixel函数将返回相对于容器div的左上角的值。
var map = null;
var ERROR_MESSAGES = {
GPS_OFF: "please turn on GPS from your settings.",
GPS_TIME_OUT: "maybe you are in a building or something, get into an open area.",
GPS_UNKOWN: "Error happened while getting location, please try again later."
};
var geolocationManager = new GeolocationManager();
function success(position) {
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 18,
center: coords,
mapTypeControl: false,
disableDefaultUI: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapcontainer"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
icon:'e-pin.png',
animation:google.maps.Animation.BOUNCE
});
}
function findPosition(onSuccess) {
geolocationManager.isLocationEnabled(function (isEnabled) {
if (!isEnabled) {
Util.Alert(ERROR_MESSAGES.GPS_OFF);
return;
}
geolocationManager.find(onSuccess, function (e) {
Util.Alert(ERROR_MESSAG`enter code here`ES.GPS_UNKOWN);
});
}, function (e) {
geolocationManager.find(onSuccess, function (e) {
Util.Alert(ERROR_MESSAGES.GPS_UNKOWN);
});
});
}
function watchPosition () {
geolocationManager.watch();
}
findPosition(success);
function getLocation() {
if (!map)
findPosition(success);
else
findPosition(showPosition);
/*if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}*/
}
function setCurrentPosition() {
findPosition(function (position) {
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.panTo(coords);
});
}
function showPosition(position) {
map.setCenter(new google.maps.LatLng(position.coords.latitude,position.coords.longitude));
}
在经过一番努力尝试，阅读其他帖子和文档等之后，这里提供了一些更新的代码，所有内容都放置在正确的位置：
var Demo = {
overlay:null,
map:null,
//callback for route request to DirectionsService
showDirections: function(dirResult, dirStatus) {
//...
//set up overlay
Demo.overlay = new google.maps.OverlayView();
Demo.overlay.draw = function() {};
Demo.overlay.setMap(Demo.map);
//add listener to get x y once map is drawn
google.maps.event.addListener(Demo.map, 'idle', function(){
var proj = Demo.overlay.getProjection();
var xy = proj.fromLatLngToContainerPixel(pos);
//...
});
},
}