使用 JQuery 输出中的数据数组在 Google 地图版本 3 上创建自定义信息窗口

Question

由于 Google 地图版本 3 的 API 仍在不断发展，我不希望使用任何插件。我的版本 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 一起使用。

Answer 1

$(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"}]');

显示结果（数据数组）；让它发挥作用。我现在只是将一些示例数据放入 JSON 位中。

enter code here