更有效的方法将标记添加到Google Maps v3

时间:2013-06-21 02:30:10

标签: google-maps-api-3

我正在以编程方式构建这个JS。每个标记都由单独的变量表示,如marker_0,marker_1等......这有效,但有一种方法可以生成标记&以更有效/更优雅的方式提供信息窗口?

            <script  type="text/javascript">
    var map;

    function initialize() {
        var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(41.056466,-85.3312009),
        mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

        //**************************************************************
        //Add 1st marker
        //**************************************************************
        var contentString_0 ='<strong>Club name: Fort Wayne Time Corners</strong>';
        var infowindow_0 = new google.maps.InfoWindow({
            content: contentString_0
        });


        var image_0 = '/js/markers/marker1.png';
        var Latlng_0 = new google.maps.LatLng(41.057814980291,-85.329851919709);
        var marker_0 = new google.maps.Marker({
              position: Latlng_0,
              title:"0",
              icon: image_0});

        marker_0.setMap(map);

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

    //**************************************************************
        //Add 2nd marker
        //**************************************************************
        var contentString_1='<strong>Club name: Roanoke</strong>';

        var infowindow_1 = new google.maps.InfoWindow({
            content: contentString_1
        });


        var image_1 = '/js/markers/marker2.png';
        var Latlng_1 = new google.maps.LatLng(41.17805990,-85.4436640);
        var marker_1 = new google.maps.Marker({
         position: Latlng_1,
        title:"1",
        icon: image_1});

        marker_1.setMap(map);

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


}

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js&sensor=false&callback=initialize";
  document.body.appendChild(script);
}

window.onload = loadScript;            
 </script>

1 个答案:

答案 0 :(得分:3)

是的,你可以轻松地做到这一点:

  1. 创建描述每个标记的数据数组。
  2. 编写一个函数,根据该数组的一个条目中的描述添加单个标记。
  3. 为该数组中的每个条目调用该函数。
  4. 因此,你必须动态生成的唯一部分是数据数组;所有标记的所有实际标记代码都是共享的。

    像这样:

    var map;
    
    var places = [
        {
            lat: 41.057814980291,
            lng: -85.329851919709,
            image: 'marker1',
            title: '0',
            club: 'Fort Wayne Time Corners'
        },
        {
            lat: 41.17805990,
            lng: -85.4436640,
            image: 'marker2',
            title: '1',
            club: 'Roanoke'
        }
    ];
    
    function initialize() {
        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(41.056466,-85.3312009),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
    
        var map = new google.maps.Map(
            document.getElementById("map-canvas"), 
            mapOptions
        );
    
        for( var i = 0;  i < places.length;  i++ ) {
            addPlace( places[i] );
        }
    
        function addPlace( place ) {
            var content = '<strong>Club name: ' + place.club + '</strong>';
            var infowindow = new google.maps.InfoWindow({
                content: content
            });
    
            var image = '/js/markers/' + place.image + '.png';
            var latlng = new google.maps.LatLng( place.lat, place.lng );
            var marker = new google.maps.Marker({
                position: latlng,
                title: place.title,
                icon: image
            });
    
            marker.setMap( map );
    
            google.maps.event.addListener( marker, 'click', function() {
                infowindow.open( map, marker );
            });
        }
    }
    
    function loadScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://maps.googleapis.com/maps/api/js&sensor=false&callback=initialize";
        document.body.appendChild(script);
    }
    
    window.onload = loadScript;