google-maps-api-3 - 向 Google map v3 添加标记的更有效方法

Question

我正在以编程方式构建此 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>

Answer 1

是的，你可以很容易地做到这一点:

1. 创建一个描述每个标记的数据数组。
2. 编写一个函数，根据该数组的一个条目中的描述添加单个标记。
3. 为该数组中的每个条目调用该函数。

因此，您唯一需要动态生成的部分就是数据数组；所有标记共享所有实际标记代码。

像这样:

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;