如何在覆盖现有地图时创建静态标记?

时间:2013-11-26 19:59:27

标签: c# javascript asp.net google-maps-api-3 google-maps-markers

嗨,我有一个数据表,我使用的是JavaScriptSerializer。

http://pastebin.com/Tz5icNzz

   public string Branches ()
   {
   DataTable dt = new DataTable();

   using (SqlConnection con = new SqlConnection("Data Source=localhost;Initial Catalog=DB;User ID=sa;Password="))

   {


    new SqlCommand("Select title=BranchName,lat=Lat,lng=Lng,city=City,BranchID=BranchID 

    from Dealer where Lat  >30", con))


   con.Open();
   SqlDataAdapter da = new SqlDataAdapter(cmd);
   da.Fill(dt);

   System.Web.Script.Serialization.JavaScriptSerializer serializer = new 

   System.Web.Script.Serialization.JavaScriptSerializer();

   List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();

   Dictionary<string, object> row;
   foreach (DataRow dr in dt.Rows)

  {

   row = new Dictionary<string, object>();

  foreach (DataColumn col in dt.Columns)

  {

   row.Add(col.ColumnName, dr[col]);

   }

    rows.Add(row);

    }

    return serializer.Serialize(rows);

       }
        }

    }

Aspx:

我使用此数据表创建了标记。

http://pastebin.com/Uy88hVBJ

   <body onload="initialize()">



  <script type="text/javascript"> 

 var markers = JSON.parse('<%=Branches() %>');

  var mapOptions = {


    center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP

     };

   var infoWindow = new google.maps.InfoWindow();

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


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


            var image = '/Images/branches.png';
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title + "  : " + data.city,

                icon: image, 

            }


                );



(function (marker, data)


 {

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

    infoWindow.setContent(data.description);
    infoWindow.open(map, marker);
    window.location = "Braches.aspx?DI=" + data.BranchID;
    icon: InitIcon

      });

       })(marker, data);

        }

直到这里我没有任何问题。我的地图正在运作

enter image description here

但我想在这张地图上添加一些静态标记。

E.g

title = XYZ,lat = 34.125444 lng:42.122121,BranchID = 12345,image = Images / branchXYZ.png

title = ABC,lat = 32.125444 lng:49.122121,BranchID = 67676,image = Images / branchABC.png

title = DEF,lat = 31.125444 lng:47.122121,BranchID = 3434,image = Images / branchDEF.png

title = GFH,lat = 34.125444 lng:42.122121,BranchID = 343434,image = Images / branchGFH.png

我该怎么做?

1 个答案:

答案 0 :(得分:1)

嗯,你已经掌握了大部分需要的东西。只需使用这些标记的新数组重复循环。或者创建一个类似的第二个循环,但根据您拥有的数据略有不同。 e.g。

var staticMarkers = [
    {title:"XYZ", lat:34.125444, lng:42.122121, BranchID:12345, image:"Images/branchXYZ.png"},
    {title:"ABC", lat:32.125444, lng:49.122121, BranchID:67676, image:"Images/branchABC.png"},
    {title:"DEF", lat:31.125444, lng:47.122121, BranchID:3434, image:"Images/branchDEF.png"},
    {title:"GFH", lat:34.125444, lng:42.122121, BranchID:343434, image:"Images/branchGFH.png"}
];

for (i = 0; i < staticMarkers.length; i++) {
    var data = staticMarkers[i];

    var image = data.image;
    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: data.title,
        icon: image,
    });

    (function (marker, data)
        {
            google.maps.event.addListener(marker, "click", function (e) {
                // you don't have any 'description', so i'm assuming you don't need the infowindow
                //infoWindow.setContent(data.description);
                //infoWindow.open(map, marker);
                window.location = "Braches.aspx?DI=" + data.BranchID;
            });
        })(marker, data);
}