Создание пользовательских информационных окон в Google Maps версии 3 с массивом данных из вывода JQuery - PullRequest
Новая
       8

Создание пользовательских информационных окон в Google Maps версии 3 с массивом данных из вывода JQuery

2 голосов
/ 28 августа 2011

Поскольку API для Google Maps версии 3 все еще развивается, я не хочу использовать какие-либо плагины.Мой оригинальный скрипт для версии 2 отлично работает для отображения пользовательского информационного окна, которое появляется при нажатии на маркер и исчезает при нажатии на область карты.Новый API представляет объект google.maps.OverlayView, который мне сложно использовать в сочетании с JQuery.Пример моего исходного кода показан ниже: 

function Results(json) {
    var L = json.output.length;
    var website = json.web;
    if (L > 0) {
        for(i=0; i<L; i++) {
            var listing = json.output[i];
            addLocation(listing, website);
        }
    }
}

function addLocation(A, B) {
    var point = new GLatLng(A.lat, A.lng);      
    var icon = new GIcon(baseIcon);
    icon.image = 'images/' + A.mks + '.png';
    var M = new GMarker(point, icon);
    map.addOverlay(M);

    GEvent.addListener(M, 'click', function(){
        showInfo(M, '<A href=\"site.php?ID=' + A.id + '\">' + A.name + '</A>');
    });
    GEvent.addListener(map, 'click', function(){
        hideInfo();
    });

    showResult(A, B);
}

function showInfo(M, text){
    var markerOffset = map.fromLatLngToDivPixel(M.getPoint());
    $('#info').appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
    $('#info').show()
        .css({ top:markerOffset.y, left:markerOffset.x })
        .html(text);
}

function hideInfo(){
    $('#info').hide();
}

var Q = 'search.php'; // an array is output in Json format
$.getJSON(Q, Results);

Самый близкий пример, который я могу найти: http://www.tdmarketing.co.nz/blog/2011/03/09/create-marker-with-custom-labels-in-google-maps-api-v3/, который все еще довольно далек от того, что я имею в виду.

Я не уверен, есть ли у кого-нибудь идея преобразовать вышеперечисленное, чтобы оно могло работать с API версии 3.

1 Ответ

0 голосов
/ 22 мая 2013 
$(document).mousemove(function(e) {
    window.x = e.pageX;
    window.y = e.pageY;
});
var hover_div;
var hover_offset_x = 0;
var hover_offset_y = 0;

var createHoverDiv = function(_txt){
    hover_div = $("<div>",{text:_txt,"class":"hover_div"});
    hover_div.css({
        "background":"#fff",
        "position":"absolute",
        "top":window.y+hover_offset_y,
        "left":window.x+hover_offset_x
    })
    $("body").append(hover_div);
};
var killHoverDiv = function(){
    hover_div.remove();
};
var displayResults = function(_json){
    for(var i=0;i!=_json.length;++i){
        addLocation(_json[i]);
    }
};
var addLocation = function(_obj){
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(_obj['lat'], _obj['lng']),
        map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
        createHoverDiv(_obj['point_name']);
    }); 
    google.maps.event.addListener(map, 'click', function() {
        killHoverDiv();
    });     
};
var data_array = $.parseJSON('[{"point_name":"point_a","lat":"-32.783129","lng":"151.74312"}]');

displayResults (data_array);чтобы это заработало.Я просто поместил некоторые примеры данных в бит JSON. 

enter code here
...