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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一个会写诗的程序员的博客

Gradle 环境安装Installation

The current Gradle release is 4.10.2. You can download binaries and view docs fo...

20230
来自专栏算法修养

HOJ-1005 Fast Food(动态规划)

Fast Food My Tags (Edit) Source : Unknown Time limit : 3 sec Memory...

29370
来自专栏一个会写诗的程序员的博客

SpringBoot 集成Kotlin : org.hibernate.InstantiationException: No default constructor for entity: : com

32720
来自专栏Netkiller

Spring boot with Hive

本文节选自《Netkiller Java 手札》 摘要: spring boot 1.5.6 + hive 2.3.0 + hadoop 2.5.0 + hb...

2K80
来自专栏别先生

Caused by: org.xml.sax.SAXParseException; systemId: file:/home/hadoop/hive-0.12.0/conf/hive-site.xml

1:Hive安装的过程(Hive启动的时候报的错误),贴一下错误,和为什么错,以及解决方法: 1 [root@master bin]# ./hive 2 1...

433100
来自专栏Netkiller

String boot with Apache kafka 完整的发布订阅例子

本文节选自电子书《Netkiller Java 手札》地址 http://www.netkiller.cn/ 5.21.7. 完整的发布订阅实例 上面的例子仅仅...

37960
来自专栏一个会写诗的程序员的博客

Spring Roo 命令行说明

参考文档:http://projects.spring.io/spring-roo/#running-from-shell

12320
来自专栏吴伟祥

Spring4 @Configuration源码

7720
来自专栏算法修养

HOJ 1444 Humble Numbers

Humble Numbers My Tags (Edit) Source : University of Ulm Internal Contest ...

30270
来自专栏码匠的流水账

chaos-monkey-spring-boot小试牛刀

chaos-monkey-spring-boot是专门为Spring Boot打造的Chaos Monkey

18510

扫码关注云+社区

领取腾讯云代金券