javascript - 谷歌地图使用多个标记不起作用!没有循环就OK

Question

我有以下函数可以在 map 上显示两个标记。您可以在线查看 - http://raveen.comlu.com/300.html ;

        <script src="http://maps.googleapis.com/maps/api/js">
    </script>

    <script>
        function initialize(){
            var latlng = new google.maps.LatLng(6.242635,80.051840); //latitude and longitude respectively
            //xxxvar image = 'office2.ico';
            //xxxvar image2 = 'children.ico';
            var contentString = '<h1> Volunteer House </h1>'+
                '<p>Many people also refer to this home as <b>VH</b>. This is a must see place in the city.'+ 
                    '<br><br>Direction - Pass the <i>Ambalangoda </i> and the <i>Kanda Road</i>. '+
                    'nd walk just 25m.</p>'+
                    '<br>Address - Ambalangoda, Sri Lanka'+
                    '<br>Website: Volunteer House, <a href="http://raveen.comlu.com" target="_blank">'+
                    'http://raveen.comlu.com</a>';

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });             

            var mapProp = {
                center:latlng,
                zoom:15, //4 - displays in world map zoom
                mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);


            //------------------------------ code for multiple markers using loops
            var places = [
                ['Ambalangoda Children Park', 6.241713, 80.052307, 2], //2 is the zIndex - order in which these markers should display on top of each other
                ['My Home', 6.242693, 80.051855, 1]
            ];

            var images = ['office2.ico', 'children.ico'];

            for( var i=0; i<places.length; i++ ){
                    var place = places[i];
                    var myMarker = new google.maps.Marker({
                            position: {lat: places[1], lng:places[2]},
                            map: map,
                            icon: images[i],
                            title: place[0],
                            zIndex: place[3]
                    });
            }

            //---------------------------------------------------------------------


            myMarker.addListener('click', function(){ 
                infowindow.open(map, myMarker); 
            })
        }

        google.maps.event.addDomListener(window, 'load', initialize)

    </script>

但是如果不使用循环，标记就会正确显示。这是没有循环的代码；

var myMarker = new google.maps.Marker({
                position: {lat: 6.242693, lng: 80.051855},
                //position: latlng,
                map: map,
                title: "My Home",
                icon: image //instead of default Google Maps pushpin icon
            });

            var myMarker2 = new google.maps.Marker({
                position: {lat: 6.241713, lng: 80.052307},
                //position: latlng,
                map: map,
                title: "Ambalangoda Children Park",
                icon: image2 //instead of default Google Maps pushpin icon
            });

新问题

先生，当我要将标记存储在数组中以便稍后我可以轻松访问特定标记时，这是我的新问题。但是当我修改代码时，它不起作用。这是我存储标记的数组；

                var myMarker = new Array(); //store marker in array

            for( var i=0; i<places.length; i++ ){
                    var place = places[i];
                    var myMarker[i] = new google.maps.Marker({
                            position: {lat: place[1], lng:place[2]},
                            map: map,
                            title: place[0],
                            icon: images[i],                                
                            zIndex: place[3]
                    });

                    /*if( i == 1 ){
                            myMarker[1].setAnimation(google.maps.Animation.BOUNCE);

                            myMarker[1].addListener('click', function(){ 
                                infowindow.open(map, myMarker[1]); 
                            })
                    }*/
            }

Answer 1

您对地点使用了错误的数组(您使用地点而不是地点)

           for( var i=0; i<places.length; i++ ){
                var place = places[i];
                var myMarker = new google.maps.Marker({
                        position: {lat: place[1], lng:place[2]},
                        map: map,
                        icon: images[i],
                        title: place[0],
                        zIndex: place[3]
                });
        }