Получить положение маркера в (x, y) на картах Google - PullRequest
Новая
       13

Получить положение маркера в (x, y) на картах Google

4 голосов
/ 23 марта 2010

Я использую карты Google. Я хочу отображать пользовательское информационное окно при нажатии на маркер. Для этого верхний левый конец моего пользовательского информационного окна должен покрывать маркер.

Проблема в том, что я не могу получить точное (x, y) то есть положение маркера на карте. Впервые я могу получить его, используя: 

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

Но когда я перетаскиваю карту, положение маркера в x, y остается неизменным, и поэтому мое информационное окно появляется в неправильном месте. Пожалуйста, помогите мне узнать, как можно получить точное положение маркера на карте, даже после перетаскивания.

Спасибо.

Ответы [ 4 ]

17 голосов
/ 13 июля 2011 
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.

0 голосов
/ 01 мая 2015

Вот мой код без классов: 

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));
}
0 голосов
/ 19 марта 2013

Поработав некоторое время, чтобы заставить это работать, прочитав другой пост, документацию и т. Д., Вот обновленный код со всем в нужном месте: 

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

}
0 голосов
/ 06 мая 2010

посмотрите это отображение на основе 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, Гоби

...