Question

我正在使用谷歌地图。我想在标记点击上显示自定义信息窗口。为此，我的自定义信息窗口的左上角应覆盖标记。

问题是我无法在地图上得到标记的精确（x，y）即map-div位置。我第一次可以使用它来获取它：

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

但是当我拖动地图时，x，y中的标记位置保持不变，因此我的信息窗口显示在错误的位置。请帮助我，即使在拖动/缩放后，如何在地图上获得标记的div相关位置。

感谢。

Answer 1

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 2

经过一段时间的努力才能让它发挥作用，阅读其他帖子和文档等，这里有一些更新的代码，所有内容都在正确的位置：

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 3

这是我没有类的代码：

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

Answer 4

看看这个基于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，戈壁

在Google地图中获取（x，y）中的标记位置

4 个答案: