在Google地圖中獲取（x，y）中的標記位置

Question

我正在使用Google地圖。我想在標記點擊時顯示自定義信息窗口。爲此，我的自定義信息窗口的左上角應該覆蓋標記。

問題是我無法在地圖上得到確切的（x，y）地圖標記位置。這是第一次，我可以用得到它：

var mposition = map.fromLatLngToDivPixel(marker.getLatLng()); 
pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(mposition.x,mposition.y)); 

但是，當我拖動地圖，在X標記位置，Y保持相同，因此出現在錯誤的位置，我的信息窗口。 請幫助我，即使在拖動/縮放之後，我如何才能在地圖上獲得標記的確切div相關位置。

謝謝。

Answer 1

看到這個基於jQuery映射它將如何幫助東西給你，

http://marcgrabanski.com/webroot/resources/jquery-ui-google-maps/tutorial-part1.html http://marcgrabanski.com/webroot/resources/jquery-ui-google-maps/tutorial-part2.html

Thanxs， 戈壁

Answer 2

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左上角的值。

Answer 3

掙扎了一段時間才能得到這個工作，閱讀其他職位和DOC等後，這裏的一切，一些更新的代碼在正確的地方：

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); 
      //... 
      }); 
     }, 

} 

Answer 4

這裏是我的代碼，而不類別：

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