Question

我是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++;
                };

Answer 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, " ");行..第一个替换我删除标题行，第二个删除新行。

Answer 2

您必须创建标记数组

var markers[];

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

markers.push(marker);

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

Answer 3

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

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

在for循环之前

在你的for循环中，你应该将迭代器增加3

为什么我在谷歌地图API中没有标记

3 个答案: