关于html:javascript中可以有多个具有相同名称的对象吗?

Can there be multiple objects with the same name in javascript?

我一直在阅读google map api中的函数关闭。 他们使用以下示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: {lat: -25.363882, lng: 131.044922 }
        });

        var bounds = {
          north: -25.363882,
          south: -31.203405,
          east: 131.044922,
          west: 125.244141
        };

        // Display the area between the location southWest and northEast.
        map.fitBounds(bounds);

        // Add 5 markers to map at random locations.
        // For each of these markers, give them a title with their index, and when
        // they are clicked they should open an infowindow with text from a secret
        // message.
        var secretMessages = ['This', 'is', 'the', 'secret', 'message'];
        var lngSpan = bounds.east - bounds.west;
        var latSpan = bounds.north - bounds.south;
        for (var i = 0; i < secretMessages.length; ++i) {
          var marker = new google.maps.Marker({
            position: {
              lat: bounds.south + latSpan * Math.random(),
              lng: bounds.west + lngSpan * Math.random()
            },
            map: map
          });
          attachSecretMessage(marker, secretMessages[i]);
        }
      }

      // Attaches an info window to a marker with the provided message. When the
      // marker is clicked, the info window will open with the secret message.
      function attachSecretMessage(marker, secretMessage) {
        var infowindow = new google.maps.InfoWindow({
          content: secretMessage
        });

        marker.addListener('click', function() {
          infowindow.open(marker.get('map'), marker);
        });
      }
   
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
1
2
3
4
5
6
7
8
html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
1
 

它们在每次循环迭代中定义marker变量。

Question: Why doesn't the marker declared in previous declaration get overridden by the marker declared in the next loop iteration? Why are multiple markers shown on the map? Since there is only one marker variable, there should be only one `marker shown on the map.


标记仍然被覆盖,但是对于这种情况它并不重要,因为它们不是再次引用那些对象。我可以在一个循环中声明一个变量,然后立即执行一个动作,但只要我不需要在循环之外引用每个单独的对象,它们仍应该用于它们的目的,在这种情况下是显示标记并显示秘密消息。例如,在下面的代码中,我使用相同的变量来制作5个按钮,一旦我将它们悬停,每个按钮都会提醒我我已经盘旋了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var buttons = ['button1', 'button2', 'button3', 'button4', 'button5'];

    for(var i = 0; i < buttons.length; ++i)
    {
        var btn = document.createElement("BUTTON");
        var t = document.createTextNode(buttons[i]);
        btn.appendChild(t);          
        document.body.appendChild(btn);
        hover(btn, buttons[i]);
    }

    function hover(thing,text)
    {
        thing.addEventListener('mouseover',function(){alert("hovered over"+ text);});
    }


marker是一个变量,每次循环迭代时,都会创建一个新对象
使用新的运算符

现在,每次标记变量更新时,它都会引用不同的对象,只是变量赋值更改,对象仍然在内存中

考虑一个例子

1
2
3
4
5
6
7
8
9
10
11
var student = {
marks: 100
}

var student1 = student;
student = {
marks: 200
}

console.log(student1.marks); //100
console.log(student.marks); //200

看到obects仍在内存中,只有我的学生变量引用更改


嗨,我之前想过这个问题。有时我必须从标记传递特定参数,所以我将标记放入数组并通过索引控制标记。这是我的代码剪辑。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  var markersArray = []; //goolge map array
        function GmapCreateMaker(index, x, y, content, iconurl) { //creat Goole map icon
            var myLatlng = new google.maps.LatLng(y, x);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map
            });
            markersArray.push(marker);
            if (index == alldataarr.length - 1) {//Check All GMAP ICON ARE PUT INTO ARRAY
                showOverlays();
            }
        }
        function showOverlays() {  //put gmap icon on map
            for (i in markersArray) {
                markersArray[i].setMap(map);
            }
        }