Question

大家好，我已经做了一段时间了，并且看了一遍。我想通过鼠标单击按钮而不是加载地图来加载标记。我需要向正确的方向努力。我在这做本地，所以我没有链接。谢谢你的帮助

<!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>

Answer 1

以上功能 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>

Maps API Javascript v3如何通过鼠标单击加载标记

1 个答案: