Question

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

问题：传递给输入名称onclick的地图ID是undefined，如下所示（它应该是'map'+ int）。

<input value="(35.69906406361917, 139.81689870357513)" name="undefined" type="hidden">

我检查了Get marker id in google maps但是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);
}

Answer 1

在检查您的代码并分析您要实现的目标后，我发现有更好的方法来实现它。不要在每次点击时创建新的隐藏输入，而是将坐标和mapId存储在数组中。顺便说一下，你有这个未定义的原因是你引用的 id 是一个不存在的属性。

例如，您的页面上有3个地图，ID为：map1，map2和map3。

在您现有的实现中，var map = [];已经是一个数组。这是对的。我们只需要再添加2个数组：标记数组和coords数组。

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

现在，让我们首先创建一个函数currentMap（），它接受两个参数： mapObject 和 mapId 。这两个参数对于添加事件和将mapIds存储到 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);
    });
  }

数组对象：

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

另一方面，initMap（）函数，我们可以使用您已经创建的for loop。在您当前的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);
    } 
  }

以下整个代码：

＆＃13;

      // Note: This example requires that you consent to location sharing when
      // prompted by your browser. If you see the error "The Geolocation service
      // failed.", it means you probably did not give permission for the browser to
      // locate you.
      var map = [];
      var marker = [];
      var coords = [];
      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);
        } 
      }
      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);
        });
      }

＆＃13;

      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      .map {
        height: 200px;
        padding:10px 0;
        display:block;
        margin:10px 0;
        width:100%;
        float:left;
        overflow:hidden;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

＆＃13;

    <div id="map1" class="map"></div>
    <div id="map2" class="map"></div>
    <div id="map3" class="map"></div>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&callback=initMap">
    </script>

＆＃13;

那就是它！您的坐标+ mapId存储在 coords 数组中。

希望这有助于编码！

Google地图 - 将地图ID和标记longlat传递给隐藏的输入元素

1 个答案: