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

Why i dont have marker in Google map API

本文关键字：谷歌地图 API 为什么      更新时间：2023-09-26

我是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中。

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

我想的是在我的代码中运行这个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++;
                };

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

  • 映射在循环中声明
  • 您的拆分操作不正确
  • 阵列上的增量步进不够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, " ");行进行评论。。使用第一个替换，我将删除标题行，第二个替换将删除新行。

您必须创建一个标记数组

var markers[];

然后在循环中，您必须创建以在lat/long上迭代，在创建标记后将其放入数组：

markers.push(marker);

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

您为每个标记创建新的映射，因此您的输出只包含带有最后一个标记的最后一个映射。尝试移动此代码：

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

在循环之前

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

相关文章：