如何在谷歌地图中添加多个标记?

时间:2013-04-26 18:25:27

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

我正在开发一个使用PhoneGap库,ADT java插件,HTML和jQuery的项目。 我使用下面的代码进行地理定位,但我不知道如何使用infowindows添加多个标记。添加多个标记的正确方法是什么?

我使用的脚本是:

window.plebeosaur = window.plebeosaur || {
        map: function() {
            var // get the page's canvas container
                mapCanvas = document.getElementById( 'map_canvas' ),
                // define the Google Maps options
                map_options = {
                    zoom: 17,
                    // let's initially center on downtown Austin
                    center: new google.maps.LatLng( 30.264664, -97.747378 ),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                },
                // then create the map
                map = new google.maps.Map( mapCanvas, map_options ),


                myMarker = 0,
                displayLocation = function( position ) {
                    // create a new LatLng object for every position update
                    var myLatLng = new google.maps.LatLng( position.coords.latitude, position.coords.longitude );


                    // build entire marker first time thru
                    if ( !myMarker ) {
                        // define our custom marker image
                        var image = new google.maps.MarkerImage(
                            'bluedot.png',
                            null, // size
                            null, // origin
                            new google.maps.Point( 8, 8 ), // anchor (move to center of marker)
                            new google.maps.Size( 17, 17 ) // scaled size (required for Retina display icon)
                        );


                        // then create the new marker
                        myMarker = new google.maps.Marker({
                            flat: true,
                            icon: image,
                            map: map,
                            optimized: false,
                            position: myLatLng,
                            title: 'I might be here',
                            visible: true
                        });


                    // just change marker position on subsequent passes
                    } else {
                        myMarker.setPosition( myLatLng );
                    }


                    // center map view on every pass
                    map.setCenter( myLatLng );
                },
                handleError = function( error ) {
                    var errorMessage = [ 
                        'We are not quite sure what happened.',
                        'Sorry. Permission to find your location has been denied.',
                        'Sorry. Your position could not be determined.',
                        'Sorry. Timed out.'
                    ];


                    alert( errorMessage[ error.code ] );
                },
                // cache the userAgent
                useragent = navigator.userAgent;


            // set the map canvas's height/width (Google Maps needs inline height/width)
            mapCanvas.style.width = mapCanvas.style.height = '100%';


            // allow iPhone or Android to track movement
            if ( useragent.indexOf('iPhone') !== -1 || useragent.indexOf('Android') !== -1 ) {
                navigator.geolocation.watchPosition( 
                    displayLocation, 
                    handleError, 
                    { 
                        enableHighAccuracy: true, 
                        maximumAge: 30000, 
                        timeout: 27000 
                    }
                );          


            // or let other geolocation capable browsers to get their static position
            } else if ( navigator.geolocation ) {
                navigator.geolocation.getCurrentPosition( displayLocation, handleError );
            }
        }
    };

1 个答案:

答案 0 :(得分:2)

var beaches = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra Beach', -33.950198, 151.259302, 1]
];

for (var i=0;i<beaches.length;i++)
{
    // add your markers here
}

您可以添加多个标记,方法是填充位置数组,然后遍历数组以将每个标记添加到地图中。您还可以创建一个函数来为信息窗口添加事件监听器。