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));
        }
    }

posted @ 2013-01-13 19:31 阿新阅读(869) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

学习园地

keep coding, enjoy coding

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

公告

搜索

积分与排名

随笔分类 (274)

随笔档案 (291)

评论排行榜

推荐排行榜

最新评论