在地图上一一设置标记 [英] set marker one by one on map

问题描述

hii ..
我在地图上有以下用于多个标记的代码..
它会在5秒钟后显示所有标记..但是我要一一显示..
我的想法是设置一个标记，并使用setTimeout等待5秒，然后设置下一个标记.

但是，它不起作用.它会同时显示所有标记.

我如何实现我的目标?谢谢您的帮助!!!!!!!!!!!!!!!

这是我的代码:

hii..
i have following code for multiple marker on map..
it display all marker after 5 seconds..but i want show them one by one..
my idea is to set a marker and use setTimeout to wait 5 seconds and then set the next marker.

However, it doesn''t work. it show all the markers at the same time.

How can i achieve my goal? Thanks for your help!!!!!!!!!!!!!!!

Here is my code:

 var locations = [
  [''loan 1'', 17.22, 78.28, ''address 1''],
  [''loan 2'', 13.5, 79.2, ''address 2''],
  [''loan 3'', 15.24, 77.16, ''address 3'']
  ];

  function initialize() 
  {
      var myOptions = {
      center: new google.maps.LatLng(21.16536,72.79387),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP

    };
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
    
    setTimeout(function() {setMarkers(map,locations);},5000);

  }

  function setMarkers(map,locations)
  {
      var marker, i

      for (i = 0; i < locations.length; i++)
      {  
         var loan = locations[i][0]
         var lat = locations[i][1]
         var long = locations[i][2]
         var add =  locations[i][3]

        latlngset = new google.maps.LatLng(lat, long);

        var marker = new google.maps.Marker({  
        map: map, title: loan , position: latlngset 
         
        });
        map.setCenter(marker.getPosition())
       
        var content = "Loan Number: " + loan +  ''</h3>'' + "Address: " + add     

        var infowindow = new google.maps.InfoWindow()

        google.maps.event.addListener(marker,''click'', (function(marker,content,infowindow){ 
        return function() {
        infowindow.setContent(content);
        infowindow.open(map,marker);
        };
        })(marker,content,infowindow)); 

     }
  }
window.onload=initialize;

推荐答案

尝试一下..

Try this..

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var locations = [
  ['loan 1', 17.22, 78.28, 'address 1'],
  ['loan 2', 13.5, 79.2, 'address 2'],
  ['loan 3', 15.24, 77.16, 'address 3']
  ];

  function initialize()
  {
      var myOptions = {
      center: new google.maps.LatLng(21.16536,72.79387),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP

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

.each(位置，函数(i，item){ var loc = new google.maps.LatLng(parseFloat(item [1])，parseFloat(item [2])); setTimeout(function(){ var marker = new google.maps.Marker({ 位置:loc， 标题:item [0]， 地图: 动画:google.maps.Animation.DROP， }); var infowindow = new google.maps.InfoWindow({ 内容:贷款编号:" +项目[0] +'< /h3 > '+地址:" +项目[3] }); //在标记点击时打开信息窗口 google.maps.event.addListener(marker，"click"，function(){ infowindow.open(地图，标记); }); //markers.push(marker); }，i * 600)； }); } < /script > window.onload = initialize;

.each(locations, function (i, item) { var loc = new google.maps.LatLng(parseFloat(item[1]), parseFloat(item[2])); setTimeout(function() { var marker = new google.maps.Marker({ position: loc, title: item[0], map: map, animation: google.maps.Animation.DROP, }); var infowindow = new google.maps.InfoWindow({ content: "Loan Number: " + item[0] + '</h3>' + "Address: " + item[3] }); // Open the infowindow on marker click google.maps.event.addListener(marker, "click", function () { infowindow.open(map, marker); }); //markers.push(marker); }, i * 600); }); } </script> window.onload=initialize;

在CS页面中尝试此功能

try this in cs page it''s work

webResponseObject = (HttpWebResponse)webRequestObject.GetResponse();
          sr = new StreamReader(webResponseObject.GetResponseStream());

          String Results = sr.ReadToEnd();
          using (XmlReader reader = XmlReader.Create(new StringReader(Results)))
          {
              // Parse the file and display each of the nodes.
              while (reader.Read())
              {
                  if (reader.Name == "businessName" && reader.NodeType == XmlNodeType.Element)
                  {
                      dt1.Rows.Add();
                      dt1.Rows[a]["businessName"] = reader.ReadInnerXml();
                  }
                

                 
                  if (reader.Name == "latitude" && reader.NodeType == XmlNodeType.Element)
                  {
                      dt1.Rows[a]["latitude"] = reader.ReadInnerXml();
                  }
                  if (reader.Name == "longitude" && reader.NodeType == XmlNodeType.Element)
                  {
                      dt1.Rows[a]["longitude"] = reader.ReadInnerXml();
                  }
                
                 

                 
              }
          }
          if (dt1 != null)
          {
              dlsearch.DataSource = dt1;
              dlsearch.DataBind();
              Binddataset(dt1);
          } 

private void Binddataset(DataTable tb1)
    {
        String Latitude = "";
        string Longitude = "";
        String Locations = "";
        foreach (DataRow r in tb1.Rows)
        {
            // bypass empty rows
            if (r["Latitude"].ToString().Trim().Length == 0)
                continue;

            Latitude = r["Latitude"].ToString();
             Longitude = r["Longitude"].ToString();

            // create a line of JavaScript for marker on map for this record
            Locations += Environment.NewLine + " map.addOverlay(new GMarker(new GLatLng(" + Latitude + "," + Longitude + ")));";
        }

        // construct the final script
        js.Text = @"<script type='text/javascript'>
                            function initialize() {
                              if (GBrowserIsCompatible()) {
                                        var map = new GMap2(document.getElementById('map_canvas'));
                                        zoom: 2;
                                         map.setCenter(new GLatLng( " + Latitude + @",  " + Longitude + @"), 6);
                                        " + Locations + @"
                                        map.setUIToDefault();
                                        });

                                }

                }
            </script> ";

}

这篇关于在地图上一一设置标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！