Javascript 谷歌地图-将地图id和标记longlat传递给隐藏的输入元素

目标：我在同一个模板上有几个地图。每次单击地图时，我都会添加标记，并将其longlat和相应的地图id传递给隐藏的输入元素

问题：在单击时传递给输入名称的映射id是

未定义的

，如下所示（应该是类似于“Map”+int的内容）

我检查过了，但是onclick函数略有不同

代码：

var maps = [];

for (i = 1; i <= 10; i++) {
    var myOptions = {
        #settings
    };

    maps[i] = new google.maps.Map(document.getElementById('map'+i), myOptions);

    var currentMap = maps[i];

    (function(currentMap) {
        currentMap.addListener('click', function(e) {
            var marker = new google.maps.Marker({
                position: e.latLng,
                map: currentMap
            });

            var data = document.createElement('input');
            data.name = currentMap.id;
            data.type = 'hidden';
            data.value = e.latLng;
            document.forms[0].appendChild(data);
        });
    })(currentMap);
}

{
 lat:-27.059125784374057
 lng:122.080078125
 mapId:"map1"
}

var映射=[]；
对于（i=1；i在检查您的代码并分析您试图实现的内容后，我发现有一种更好的方法来实现它。与其在每次单击时创建新的隐藏输入，不如将坐标和mapId存储在数组中。顺便说一句，您之所以使用未定义的是因为idyou正在引用的属性不存在

例如，页面上有3个地图，ID分别为：map1、map2和map3

在您现有的实现中，
var-map=[]；
已经是一个数组。这是正确的。我们只需要再添加两个数组：marker数组和coords数组

var marker = [];
var coords = [];

现在，让我们首先创建一个函数currentMap（）它接受两个参数：mapObject和mapId。这两个参数对于添加事件和将mapId存储到coords数组中是必不可少的。第一个参数mapObject将使用.addListener方法。其思想是在非常映射单击并将获取的坐标与第二个参数提供的mapId一起存储到对象的数组中。数组对象属性：mapId、lat和lng

currentMap（）函数和定义：

  function currentMap(mapObject, mapId) {
    mapObject.addListener('click', function(e){
        var marker = new google.maps.Marker({
            position: e.latLng,
            map: mapObject
        });    
      coords.push({
        mapId: mapId,
        lat: e.latLng.lat(),
        lng: e.latLng.lng()
      });
      //console.log(coords);
    });
  }

数组对象：

var maps = [];

for (i = 1; i <= 10; i++) {
    var myOptions = {
        #settings
    };

    maps[i] = new google.maps.Map(document.getElementById('map'+i), myOptions);

    var currentMap = maps[i];

    (function(currentMap) {
        currentMap.addListener('click', function(e) {
            var marker = new google.maps.Marker({
                position: e.latLng,
                map: currentMap
            });

            var data = document.createElement('input');
            data.name = currentMap.id;
            data.type = 'hidden';
            data.value = e.latLng;
            document.forms[0].appendChild(data);
        });
    })(currentMap);
}

{
 lat:-27.059125784374057
 lng:122.080078125
 mapId:"map1"
}

另一方面，在initMap（）函数中，我们可以使用您已经创建的
for循环
。在当前的initMap（）实现中，一切似乎都很好，我们只需删除不再需要的不必要的行。此外，在循环中，调用currentMap（）我们最近创建的函数，然后提供必要的参数

  function initMap() {
    var myLatLng = {lat: -25.363, lng: 131.044};
    for ( var i = 1; i <= 3; i++ ) {
      map[i] = new google.maps.Map(document.getElementById('map'+i), {
        zoom: 4,
        center: myLatLng
      }); 
      currentMap(map[i], 'map'+i);
    } 
  }


非常感谢您一步一步地解释逻辑！我的代码现在运行正常。只有一个问题。使用数组而不是隐藏输入有什么好处吗？根据我自己的经验，数组在开发中起着重要的作用。您可以查看了解更多。编程中的每件事都有其优点和缺点，这实际上取决于您如何操作在某些情况下，隐藏的信息起着至关重要的作用。