在动态生成的DIV的鼠标悬停时显示Google Maps Marker信息名称

问题描述

我想介绍一个功能，该功能允许在鼠标悬停或从jQuery生成的相应DIV元素移出鼠标时，标记的信息名显示或消失.但是，我在 main.js .经过对脚本的广泛测试，我意识到这与新添加的行中的标记有关，如下所述:

I want to introduce a functionality which allows a marker's infoname to appear or disappear upon mouseover or mouseout of a corresponding DIV element generated from jQuery. However, I am getting a "a is undefined" error on line 19 of main.js. After extensive testing on my script, I realise that this has something to do with the marker in the newly added lines as commented below:

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);});

如果我将功能addInfoName合并到process，则错误消失.但是，如果我这样做的话，所有DIV都将指向最后一个标记.我的问题是，如何修改脚本以实现上述功能?

The error disappears if I merge the function addInfoName into process. However, all the DIVs will point to the last marker if I do so. My question is, how do I modify my script to achieve the functionality mentioned above?

推荐答案

当前，您已经在process函数的本地声明了变量marker，但是您正在尝试从其他函数读取和写入该变量. .特别地，addMarker写入marker而没有var，这将导致创建意外的全局变量.同时，process实际上并未写入其声明的marker本地，因此它包含undefined，当您将其传递时，它将使Google Maps代码跳闸.

Currently you've got a variable marker declared local to the process function, but you're trying to read and write to it from other functions. In particular, addMarker writes to marker without var, which causes an accidental global variable to be created. Meanwhile process is not actually writing to the marker local it has declared, so it contains undefined, which will trip the Google Maps code up when you pass that in.

(jslint或ECMAScript 5 Strict Mode之类的工具可以为您捕获意外的全局变量.注意total和i也是意外的全局变量.)

(Tools like jslint, or ECMAScript 5 Strict Mode can catch accidental globals for you. Note total and i are also accidental globals.)

似乎addMarker和addInfoname已从process的主体中删除，而没有占用它们都使用的process中的变量.如果将它们包含在process的主体中，则可以使用，但是由于闭环问题，您会得到描述的行为，其中每个div使用相同的marker值.

It looks like addMarker and addInfoname have been hacked out of the body of process without tying up the variables from process that both of them used. If they were included in the body of process it would work, but you'd get the described behaviour where the same marker value was used for every div because of the Closure Loop Problem.

在具有闭包和函数级范围的语言(包括JavaScript，Python和其他语言)中会发生此问题.在这些语言中，由for循环定义或内部的任何变量都是包含函数的局部变量，每次您遍历循环时， not 均会重新分配.因此，如果在循环的第一次迭代中引用i进行闭包，则它与在循环的第二次迭代中引用的变量i相同.该函数的每个实例对同一变量i都有一个闭包，因此每个函数将看到相同的值. marker也是如此.

This problem occurs in languages with closures and function-level scope, which includes JavaScript, Python and others. In these languages any variables defined by or inside a for loop are local to the containing function, not reallocated every time you go around the loop. So if you make a closure referring to i in the first iteration of the loop, it's the same variable i as you refer to in the second iteration of the loop; every instance of the function has a closure over the same variable i so every function will see the same value. The same would be true of marker.

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

The Closure Loop Problem can be avoided through use of a second closure that keeps the loop variable in an argument, or, more cleanly, using a closure-based loop mechanism instead of the C-like for loop. ECMAScript 5 offers array.forEach() for this purpose and jQuery offers $.each():

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)
        )
    });
}

这篇关于在动态生成的DIV的鼠标悬停时显示Google Maps Marker信息名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！