Maps API Javascript v3, как загружать маркеры одним щелчком мыши - PullRequest
Новая
       15

Maps API Javascript v3, как загружать маркеры одним щелчком мыши

0 голосов
/ 27 февраля 2011

Привет всем, я работал над этим некоторое время и осмотрел все.Я хочу загружать маркеры щелчком мыши по кнопке, а не при загрузке карты.Мне нужно немного подтолкнуть в правильном направлении.Я делаю это локально, поэтому у меня нет ссылки.спасибо за любую помощь 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>boats</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
</script> 
</head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

var infowindow = null;


    function initialize() {

        var washington = new google.maps.LatLng(47.7435, -122.1750);

        var myOptions = {
            zoom: 7,
            center: washington,
            mapTypeId: google.maps.MapTypeId.TERRAIN
        }

        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


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


        boats(map, seller);
    infowindow = new google.maps.InfoWindow({
                content: "loading..."
            });

}
    var seller = [
    ['joe boat', 48.0350,-122.2570, 4, 'This is in good shape.'],
    ['bobs boat', 48.7435, -122.1750, 2, 'This is in bad shape.'],
    ['bubas boat', 47.3435, -122.1750, 1, 'This is in ok shape'],
    ['daveys boat', 47.7435, -122.1750, 3, 'dont buy this one.']
];



    function boats(map, markers) {

        for (var i = 0; i < markers.length; i++) {
            var seller = markers[i];
            var sellerLatLng = new google.maps.LatLng(seller[1], seller[2]);
            var marker = new google.maps.Marker({
                position: sellerLatLng,
                map: map,
                title: seller[0],
                zIndex: seller[3],
                html: seller[4]
            });

            var contentString = "content";



            google.maps.event.addListener(marker, "click", function () {

                infowindow.setContent(this.html);
                infowindow.open(map, this);
            });
        }
    }
</script>
<body onLoad="initialize()">
<div id="map_canvas" style="width: 450px; height: 350px;">map div</div>
<button id="boats" onClick="boats()">Boats</button>
</body>
</html>

1 Ответ

0 голосов
/ 01 марта 2011

Над функцией initialize () put: 

var map = null;

Удалите var перед картой в инициализации, чтобы прочитать: 

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

Прокомментируйте или удалите лодки (карта, продавец); в инициализации

Измените кнопку, чтобы включить параметры функции лодки: 

<button id="boats" onClick="boats(map, seller);">Boats</button>

Полный кодовый блок: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>boats</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
</script>
</head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var infowindow = null;
var map = null;
function initialize() {
    var washington = new google.maps.LatLng(47.7435, -122.1750);
    var myOptions = {
        zoom: 7,
        center: washington,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
    });
    infowindow = new google.maps.InfoWindow({
            content: "loading..."
        });
}

var seller = [
['joe boat', 48.0350,-122.2570, 4, 'This is in good shape.'],
['bobs boat', 48.7435, -122.1750, 2, 'This is in bad shape.'],
['bubas boat', 47.3435, -122.1750, 1, 'This is in ok shape'],
['daveys boat', 47.7435, -122.1750, 3, 'dont buy this one.']
];

function boats(map, markers) {
    for (var i = 0; i < markers.length; i++) {
        var seller = markers[i];
        var sellerLatLng = new google.maps.LatLng(seller[1], seller[2]);
        var marker = new google.maps.Marker({
            position: sellerLatLng,
            map: map,
            title: seller[0],
            zIndex: seller[3],
            html: seller[4]
        });
        var contentString = "content";
        google.maps.event.addListener(marker, "click", function () {
            infowindow.setContent(this.html);
            infowindow.open(map, this);
        });
    }
}
</script>
<body onLoad="initialize()">
<div id="map_canvas" style="width: 450px; height: 350px;">map div</div>
<button id="boats" onClick="boats(map, seller);">Boats</button>
</body>
</html>
...