GoogleMaps api for javascript demo 動態按順序載入marker

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

@{    }<!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));        }    }

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More