为什么我在 Google 地图 API 中没有标记答案

【问题标题】：Why i dont have marker in Google map API为什么我在 Google 地图 API 中没有标记
【发布时间】：2015-05-22 21:37:58
【问题描述】：

我是 HTML 和 JavaScript 的初学者。我读了一个包含经度和纬度的文本文件。我阅读了该文本文件并将其存储在 3 个数组中。一个包含经度，一个纬度，一个包含 ID。文本文件是这样的：（您可以使用下面的代码将其存储用于调试目的）

ID  LONGITUDE   LATITUDE
0   77.139305   28.795975
2   77.308929   28.486877
4   73.820680   18.464110
6   75.588783   26.599820
12  77.193575   28.559693

我读了它并分别存储了第 1、2 列和 col1、col2、col3。

现在的问题是，只有当我手动放置长纬度时，下面的代码才会在地图上显示标记，但是当我使用列数组时，它不会显示任何标记，而是显示地图。

我的想法是在我的代码中运行这个 for 循环，它应该呈现给定地图中的所有标记。（是的，我确实存储了我在调试时可以看到的所有 Long、Lat 和 Id） .

我的代码是：

                for (var i = 0; i <= array.length - 1; i++)
                {
                    col1[j] = array[i];
                    col2[j] = array[i + 1];
                    col3[j] = array[i + 2];
                    var myLatlng = new google.maps.LatLng(col3[j], col2[j]);
                    var mapOptions =
                        {
                            zoom: 4,
                            center: myLatlng
                        }
                    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

                    var marker = new google.maps.Marker({
                        position: myLatlng,
                        map: map,
                        title: 'Hello World!'
                    });
                    j++;
                };

【问题讨论】：

Creating markers from external xml file 的可能重复项

标签： javascript html google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

您的代码有很多问题...

地图在循环内声明
您的拆分无法正常工作
你的阵列增量不够i
标记定义中的纬度和经度倒数

我进行了以下编辑，并为您提供了一个小提琴供您查看，以便您可以合并代码...http://jsfiddle.net/b4fz30vc/

function initialize() {
    var data =
        "ID  LONGITUDE   LATITUDE\r\n" +
        "0   77.139305   28.795975\r\n" +
        "2   77.308929   28.486877\r\n" +
        "4   73.820680   18.464110\r\n" +
        "6   75.588783   26.599820\r\n" +
        "12  77.193575   28.559693\r\n";

    var s2 = data.replace(/^.*$/, "").replace(/\r\n/g, " ");
    var array = s2.split(/[ ]+/g);
    var col1 = [];
    var col2 = [];
    var col3 = [];
    var j = 0;

    var mapOptions = {
        zoom: 2,
        center: new google.maps.LatLng(73, 23)
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    for (var i = 0; i <= array.length - 1; i++) {
        col1[j] = array[i];
        col2[j] = array[i++];
        col3[j] = array[i++];

        var myLatlng = new google.maps.LatLng(col3[j], col2[j]);

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Hello World! ' + col1[j]
        });
        j++;
    }
}

initialize();

编辑：

要评论var s2 = data.replace(/^.*$/, "").replace(/\r\n/g, " "); 行.. 第一个替换我删除标题行，第二个删除新行。

【讨论】：

抱歉不能为我工作。没有显示标记。只显示地图
您确定您的 LatLong.txt 文件被正确读取了吗？
你能帮我把你新合并的代码放到一个粘贴箱吗？
@harold，我有帐户。但是我已经复制并粘贴了完整的代码（请参阅更新的代码）以及 txt 文件文本。让我记账。
好的，所以您所做的就是将地图移到 for 循环之外。请修复其他错误。

【解决方案2】：

你必须创建一个标记数组

var markers[];

然后在循环中你必须创建迭代纬度/经度，在创建标记后将其放入数组中：

markers.push(marker);

通过这种方式，您可以保持标记处于活动状态...

【讨论】：

这并不重要，因为它仍然可以工作，但仍然是一个非常非常好的主意
如果您不创建数组，您将在地图中只看到一个标记
看看我为我的答案制作的小提琴jsfiddle.net/b4fz30vc你肯定不需要数组。
真的，你不能控制工具提示！！很棒的收获！ +1
标题/工具提示有效，但我认为你是对的，除非你在 for 循环中也这样做，否则做 infowindows 和高级的东西可能会很痛苦，这将是狗的早餐； )

【解决方案3】：

您为每个标记创建新地图，因此您的输出仅包含带有最后一个标记的最后一张地图。尝试移动这段代码：

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

在for循环之前

顺便说一句，在您的 for 循环中，您应该将迭代器增加 3

【讨论】：