Javascript 在动态生成的DIV上方的鼠标上显示Google Maps Marker infoname

我想介绍一个功能，该功能允许标记的infoname在从jQuery生成的相应DIV元素的mouseover或mouseout上出现或消失。但是，我在的第19行收到一个“a未定义””错误。在对我的脚本进行广泛测试后，我意识到这与新添加行中的标记有关，如下所述：

function addMarker(A) {
 var point = new google.maps.LatLng(A.lat, A.lng);      
 var image = new google.maps.MarkerImage('images/r.png',
  new google.maps.Size(30, 30),
  new google.maps.Point(0, 0),
  new google.maps.Point(0, 30));
 marker = new google.maps.Marker({
  map: map,
  position: point,
  icon: image,
 });
}

function addInfoName(A) {
 var infoname = new infoName; // custom object
 google.maps.event.addListener(marker, 'mouseover', function(event) {infoname.show();});
 google.maps.event.addListener(marker, 'mouseout', function(event) {infoname.hide();});
 infoname.open(map, marker);
}

function showResult(A) {
 $('#results').append('<DIV id=' + A.pid + '>{Blah Blah Blah}</DIV>');
 return document.getElementById(A.pid);
}

function process(json) {
 $('#results').empty();
 total = json.details.length;
 for(i=0; i<total; i++) {
  var detail = json.details[i];
  var marker;
  addMarker(detail);
  addInfoName(detail);

// these new lines are added
  var listDisplay = showResult(detail);
  listDisplay.onmouseover = function(){google.maps.event.trigger(marker, 'mouseover');};
  listDisplay.onmouseout = function(){google.maps.event.trigger(marker, 'mouseout');};
 }
}

google.maps.event.addListener(map, 'idle', function () {$.getJSON(query, process);});

函数addMarker（A）{
var point=new google.maps.LatLng（A.lat，A.lng）；
var image=new google.maps.MarkerImage（'images/r.png'，
新google.maps.Size（30,30），
新的google.maps.Point（0,0），
新的google.maps.Point（0,30））；
marker=新的google.maps.marker({
地图：地图，
位置:点,，
图标：图像，
});
}
函数AddInfo名称（A）{
var infoname=new infoname；//自定义对象
google.maps.event.addListener（标记'mouseover'，函数（事件）{infoname.show（）；}）；
google.maps.event.addListener（标记'mouseout'，函数（事件）{infoname.hide（）；}）；
打开（地图、标记）；
}
函数显示结果（A）{
$（'#results'）。追加（'{Blah Blah}'）；
返回文档.getElementById（A.pid）；
}
函数过程（json）{
$（“#结果”）.empty（）；
total=json.details.length；
对于（i=0；i而言，“a未定义”错误可能是因为您试图在dom准备就绪之前创建映射。至少，这是我唯一一次看到它。我无法从代码中判断您在哪里创建它，但请确保map div已准备就绪。您必须将对initialize函数的调用放在页面底部或页面加载侦听器中。她有一种方法可以做到这一点（这可以在页面中的任何位置）：

还要注意，您的空闲侦听器也会进入该init函数，因为在创建映射之前，它将无法运行

如果这不是“a未定义”的原因错误，那么我在您发布的代码中看不到它。但是，我确实看到了您的代码中的其他一些问题。因此，可能这就是导致错误的原因。首先，
进程中的
var标记；
定义不起任何作用。在这里，您创建了一个局部变量，但该局部变量从未定义过。然后，
addMarker
通过定义
marker
而不使用
var
，您正在创建一个全局变量。因此
addinfo name
中的标记始终引用全局标记，它将始终是定义的最后一个标记。这就是为什么div总是与最后一个标记一起显示。我会在
marker=”之前加上一个返回。..
在addMarker中，并使用它设置标记变量，如下所示：

var marker = addMarker(detail);

当然是在
进程中。然后您还必须将其作为参数发送给AddInfo Name，这样它才能得到正确的参数。
目前您有一个变量
标记
声明为
进程
函数的本地变量，但您正试图从其他函数读取和写入它。特别是，
addMarker
写入不带
var
的
marker
，这会导致意外的全局变量被创建。同时
进程
实际上并没有写入它声明的
标记
本地，因此它包含
未定义的
，当您传入该变量时，它将触发Google Maps代码

（像jslint或ECMAScript 5 Strict模式这样的工具可以为您捕获意外全局变量。注意
total
和
i
也是意外全局变量。）

看起来
addMarker
和
addinfo name
已经从
process
的主体中被砍掉了，而没有绑定它们所使用的
process
中的变量。如果它们被包含在
process
的主体中，它会起作用，但您会得到描述的行为，其中相同的
标记值

这个问题发生在具有闭包和函数级作用域的语言中，其中包括JavaScript、Python和其他语言。在这些语言中，由
for
循环定义的或在
for
循环中定义的任何变量都是包含函数的本地变量，不会在每次循环时重新分配。因此，如果在循环的第一次迭代，它是与您在循环的第二次迭代中所指的相同的变量
i
；函数的每个实例在相同的变量
i
上都有一个闭包，因此每个函数都将看到相同的值。
marker
也是如此

可以通过使用第二个闭包来避免闭包循环问题，该闭包将循环变量保留在参数中，或者更简洁地说，使用基于闭包的循环机制，而不是类似C的
for
循环。ECMAScript 5为此提供了
array.forEach（）
，而jQuery提供了
$。each（）
：

函数过程（json）{
$（“#结果”）.empty（）；
var gev=google.maps.event；
$.each（json.details，函数（detaili，detail）{
var标记=添加标记（detail.lat，detail.lng）；
$（'#结果'）。追加（$（''）{
text:detail.name，
mouseover:function（）{gev.trigger（标记'mouseover'）；}，
mouseout:function（）{gev.trigger（标记'mouseout'）；}
}));
var infoname=new infoname（）；
addListener（标记'mouseover'，function（）{infoname.show（）；}）；
addListener（标记'mouseout'，函数（）{infoname.hide（）；}）；
打开（地图、标记）；
});
}
功能添加标记器（lat、lng）{
返回新的google.maps.Marker({
地图：地图，
位置：新google.maps.LatLng（lat，lng），
图标：新建google.maps.MarkerImage(
“images/r.png”，
新google.maps.Size（30,30），
新的google.maps.Point（0,0），
新google.maps.Point（0,30）
)
});
}
你好，150磅重的毒蛇，它不起作用。
var marker = addMarker(detail);

function process(json) {
    $('#results').empty();
    var gev= google.maps.event;
    $.each(json.details, function(detaili, detail) {
        var marker= addMarker(detail.lat, detail.lng);

        $('#results').append($('<div>', {
            text: detail.name,
            mouseover: function() { gev.trigger(marker, 'mouseover'); },
            mouseout: function() { gev.trigger(marker, 'mouseout'); }
        }));

        var infoname= new InfoName();
        gev.addListener(marker, 'mouseover', function() { infoname.show(); });
        gev.addListener(marker, 'mouseout', function() { infoname.hide(); });
        infoname.open(map, marker);
    });
}

function addMarker(lat, lng) {
    return new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(lat, lng),
        icon: new google.maps.MarkerImage(
            'images/r.png',
            new google.maps.Size(30, 30),
            new google.maps.Point(0, 0),
            new google.maps.Point(0, 30)
        )
    });
}