GoogleMaps api for javascript demo 动态按顺序加载marker

@{

    

}



<!DOCTYPE html>



<html lang="zh">

    <head>

        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />



<script type="text/javascript"    src="https://maps.google.com/maps/api/js?sensor=false"> </script>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <meta charset="utf-8" />

        <title>我的站点标题</title>

        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

        <style type="text/css">

  html { height: 100% }

  body { height: 100%; margin: 0px; padding: 0px }

  #map_canvas { height: 90% }

</style>

    <script type="text/javascript">

        var map;

        function initialize() {

            var myLatlng = new google.maps.LatLng(31.38491295646036, 120.98114993423223);

            var myOptions = {

                zoom: 12,

                center: myLatlng,

                mapTypeId: google.maps.MapTypeId.ROADMAP

            }

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

            google.maps.event.addListener(map, 'click', function (event) {

                addmarker(map, event.latLng);

            });

        }



        function addmarker(map, position) {

            var marker = new google.maps.Marker({

                position: position,

                map: map,

                draggable: true,

                title: "" + position

            });

            var message = new google.maps.InfoWindow({

                content: "position:" + marker.position + ";"



            });

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

                //if (message) message.close();

                //message.open(map, marker);

                if (typeof infowindow != 'undefined') infowindow.close();

                infowindow = new google.maps.InfoWindow({

                    content: "position:" + marker.position + ";"

                });

                infowindow.open(map, marker);

            });

            google.maps.event.addListener(marker, 'dragend', function () {

                //alert('position' + marker.position);

                $('#result').append(marker.position);

            });

            google.maps.event.addListener(marker, 'dblclick', function () {

                //alert('position' + marker.position);

                marker.setMap(null);

            });



            google.maps.event.addListener(marker, 'dragstart', function () {

                if (typeof infowindow != 'undefined') infowindow.close();

            });



        }



</script>

</head>

<body onload="initialize()">

  <div id="result"></div>

  <div id="map_canvas" style="width:100%; height:100%"></div>

</body>

</html>

  

function initialize() {

        var centerMap = new google.maps.LatLng(31.373965502830007, 120.95897912979126);

        var myOptions = {

            zoom: 14,

            center: centerMap,

            mapTypeId: google.maps.MapTypeId.ROADMAP,

            scrollwheel: true

        }



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



        google.maps.event.addListenerOnce(map, 'tilesloaded', function () {

            setMarkers(map, sites);

        });

        infowindow = new google.maps.InfoWindow({

            content: "loading..."

        });

    }









    function setMarkers(map, markers) {

        // TESTING ONLY, remove later

        //markers.splice(0, 200 - howMany);



        //markers.sort(latitudeSort);



        for (var i = 0; i < markers.length; i++) {

            var sites = markers[i];

            var siteLatLng = new google.maps.LatLng(sites[2], sites[3]);

            (function (i, siteLatLng, sites) {

                setTimeout(function () {

                    var marker = new google.maps.Marker({

                        position: siteLatLng,

                        map: map,

                        title: sites[1],

                        animation: google.maps.Animation.DROP

                    });



                    var contentString = "Some content";

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

                        infowindow.setContent(this.html);

                        infowindow.open(map, this);

                    });

                }, i * 100, 100);

            } (i, siteLatLng, sites));

        }

    }

  

你可能感兴趣的:(JavaScript)