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

由于Google地图版本3的API仍在不断发展，我不希望使用任何插件。我的第2版原始脚本完美地显示了单击标记时出现的自定义infowindow，并在点击地图区域时消失。新的API引入了一个对象google.maps.OverlayView，我与JQuery一起使用时遇到了困难。我原来的代码示例如下图所示：使用JQuery中的数据数组在Google Maps版本3上创建自定义信息窗口输出

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

来源

2011-08-28 Ben

$(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

来源

2013-05-22 00:56:48 danski

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

回答

相关问题