javascript - 谷歌地图 v3 上的多个标记无法循环工作

Question

好吧，大家好，我在添加多个标记时遇到了一些问题。我发誓我一直在寻找，直到我的眼睛都交叉了，但我就是无法弄清楚这一点。

这是我的代码:

function initialize()
{
cnt = 0;

var icon = "bullet-red-icon.png";

var mapProp = {
    center: new google.maps.LatLng(39.8282,-98.5795),
    zoom:5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

$("marker", mapxml).each(
    function(i)
    {
        var iwcontent = $(this).find("mname").text() + "<br /><br />";
        iwcontent += $(this).find("mstreet").text() + "<br />" + $(this).find("mcity").text() + " " + $(this).find("mstate").text() + " " + $(this).find("mzip").text() + "<br /><br />";
        iwcontent += "UNITS: " + $(this).find("units").text() + "<br />";
        iwcontent += "UNIT COST: " + $(this).find("unitcost").text() + "<br />";
        iwcontent += "TOTAL FUEL COST: " + $(this).find("fuelcost").text() + "<br />";

        var mlat = parseFloat($(this).find("mlat").text());
        var mlon = parseFloat($(this).find("mlon").text());

        addMarker(iwcontent, mlat, mlon, map, i);
    }
);

$("#d_transmap").show();
$(".t_loader").hide();

}

现在我知道所有数据都在那里，我已经控制台记录了所有内容，一切看起来都很好。 但是根本没有出现任何标记。

这是 addMarker 函数:

function addMarker(content, lat, lon, map, i)
{
    var point = new google.maps.LatLng(lat, lon.toFixed(6));
    var marker = new google.maps.Marker({ position: point, icon: "bullet-red-icon.png", map: map });
    var infowindow = new google.maps.InfoWindow({ content: content });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(content);
            infowindow.open(map, marker);
        }
    })(marker, i));
}

现在，如果我跳出循环并调用它:

addMarker(content, 39.8282, -98.5795, map, i)

它会吐出一个标记!所以我最初的想法是我的经纬度数据有问题。然而，我记录了所有这些，甚至记录了标记本身，它似乎创建了它们。我只是没有看到它们。

我到底做错了什么？

Answer 1

您的 addMarker() 函数有几个问题。

1. 不应该调用lon.toFixed(6)。直接使用lon即可。另外，我建议使用名称 lng 而不是 lon，以与 Maps API 术语保持一致。
2. 您不需要为点击事件监听器使用返回函数的华丽歌舞。这里已经有一个闭包，因为 addMarker() 是一个函数。您不需要再次关闭。而且您根本不需要 i 参数。这不会阻止您的代码正常工作，但它会带来很多您不需要的额外复杂性。

function addMarker(content, lat, lng, map) {
    var point = new google.maps.LatLng(lat, lng);
    var marker = new google.maps.Marker({
        position: point,
        icon: "bullet-red-icon.png",
        map: map
    });
    var infowindow = new google.maps.InfoWindow({ content: content });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(content);
        infowindow.open(map, marker);
    });
}

更新:在测试页面中一直放大，以便您可以看到南极洲。找到丢失的标记了吗？ :-)

(更新 2:嗯，有时我会看到那里的标记，有时则看不到。但请继续阅读...)

现在检查 XML 下载中的纬度和经度，例如:

<mlat>-82.753936</mlat>
<mlon>42.675168</mlon>