如何在Google地图上创建100多个标记100+

时间:2014-12-25 16:19:50

标签: javascript google-maps google-maps-markers

我想在自定义地图上显示100个标记我应该在单个标记代码下重复100次并拥有大量文件还是有其他更紧凑的方法来创建多个标记?

 var marker = new google.maps.Marker({
                position: new google.maps.LatLng(34.052661,-118.269976),
                title:"Hello World!",
                map:map,
                animation: google.maps.Animation.DROP
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });

            var infowindow = new google.maps.InfoWindow({
                content: '<div id="content">'+
                                '<div id="siteNotice">'+
                                '</div>'+
                                '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
                                '<div id="bodyContent">'+
                                '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
                                'sandstone rock formation in the southern part of the '+
                                'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
                                'south west of the nearest large town, Alice Springs; 450&#160;km '+
                                '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
                                'features of the Uluru - Kata Tjuta National Park. Uluru is '+
                                'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
                                'Aboriginal people of the area. It has many springs, waterholes, '+
                                'rock caves and ancient paintings. Uluru is listed as a World '+
                                'Heritage Site.</p>'+
                                '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
                                'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
                                '(last visited June 22, 2009).</p>'+
                                '</div>'+
                            '</div>',
            });

1 个答案:

答案 0 :(得分:0)

您可以使用标记所需的所有数据创建一个对象数组,并在循环中迭代它,这样您的代码就会更加紧凑和高效。

例如:

var myMarkers = new Array(
           {lat:34.052661, lng:-118.269976, title:"Hello World"},
           {lat:14.052661, lng:-108.269976, title:"Hello World 2"},
           {lat:14.052661, lng:-108.269976, title:"Hello World 3"}, //Continue...
    );

//LOOP on marker data array
for(var i = 0; i < myMarkers.length; i++){
    var currMarker = myMarker[i];
    var marker = new google.maps.Marker({
            position: new google.maps.LatLng(currMarker.lat,currMarker.lng),
            title:currMarker.title,
            map:map,
            animation: google.maps.Animation.DROP
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
        });

        var infowindow = new google.maps.InfoWindow({
            content: '<div id="content">'+
                            '<div id="siteNotice">'+
                            '</div>'+
                            '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
                            '<div id="bodyContent">'+
                            '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
                            'sandstone rock formation in the southern part of the '+
                            'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
                            'south west of the nearest large town, Alice Springs; 450&#160;km '+
                            '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
                            'features of the Uluru - Kata Tjuta National Park. Uluru is '+
                            'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
                            'Aboriginal people of the area. It has many springs, waterholes, '+
                            'rock caves and ancient paintings. Uluru is listed as a World '+
                            'Heritage Site.</p>'+
                            '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
                            'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
                            '(last visited June 22, 2009).</p>'+
                            '</div>'+
                        '</div>',
        });
}