在Google地图中创建标记,但仅显示最后一个标记

时间:2017-09-20 06:53:58

标签: javascript c# google-maps google-maps-markers

我在C#中的循环中调用JavaScript函数。每次调用都会将描述,经度和纬度发送给函数。该函数在地图中创建单个标记。我想看到的是所有标记,其相应的信息在循环中发送。我所看到的是最后一个项目的标记。

C#代码

        protected void MapButton_Click(object sender, EventArgs e)
    {
        ///////////////////////////////////////////////
        // Get all Games that are being played today //
        // then send HomeTeam, AwayTeam and          //
        // Coordinates to MapIt.                     //
        ///////////////////////////////////////////////

        ///////////////////////////////////////////////
        // Step 1: Call Stored Procedure that will   //
        //         return the TeamNames and          //
        //         Coordinates where the games will  //
        //         be played today.                  //
        ///////////////////////////////////////////////
        string strcon = WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString;
        using (SqlConnection conn = new SqlConnection(strcon))
        {
            SqlCommand cmd = new SqlCommand("GameDayCoordinates", conn);
            cmd.CommandType = CommandType.StoredProcedure;
            conn.Open();
            DataTable MapItTbl = new DataTable();
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            da.Fill(MapItTbl);
            ///////////////////////////////////////////////
            // Step 2: Send each set of Teams and        //
            //         Coordinates to MapIt. Within a    //
            //         loop.                             //
            // Send the Google Map Coordinates, and this //
            // function will mark the places on Google   //
            // Maps via a JavaScript function.           //
            ///////////////////////////////////////////////

            int count = MapItTbl.Rows.Count;
            string[] splitSeparator = new string[] { ", ",", "};
            LocObject[] LocationInfo = new LocObject[count];

            for (int i = 0; i < MapItTbl.Rows.Count; i++)
            {
                DataRow row = MapItTbl.Rows[i];
                string Coordinates = row["Coordinate"].ToString();
                if (Coordinates != "NULL") {
                    string[] strArr = Coordinates.Split(splitSeparator, StringSplitOptions.None);
                    ScriptManager.RegisterStartupScript((Page)this, base.GetType(), i + "GMaps" + DateTime.UtcNow, string.Format("GameMap('{0}','{1}','{2}','{3}');", row.ItemArray.GetValue(0).ToString(), strArr[0], strArr[1], i), true);
                }
            }
        }
    }

调用JavaScript函数

            function GameMap(description, lat, lng, index) {

            var marker = new Array();
            var i;
            var max = 100;
            var myLatLng = { lat: 32.787407, lng: -82.269194 };
            var MapObj;
            MapObj = document.getElementById('map1');

            var map1 = new google.maps.Map(MapObj, {
                zoom: 7,
                center: myLatLng,
                mapTypeId: google.maps.MapTypeId.HYBRID
            });

            var GameLatlng = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));

            document.write(description);
            document.write(index);

            marker = new google.maps.Marker({
                position: GameLatlng,
                title: description
            });

            //for (i = 0; i < 8; i++) {
            marker.setMap(map1);
            //}
        }

如何显示所有标记(而不是最后一个标记)?

1 个答案:

答案 0 :(得分:0)

在“Good poing .... Thanks!”之后看到评论。

    <script type="text/javascript">

    var map;
        function initMap() {

            var myLatLng = { lat: 32.787407, lng: -83.269194 };

            map = new google.maps.Map(document.getElementById('map1'), {
                zoom: 7,
                center: myLatLng,
                mapTypeId: google.maps.MapTypeId.HYBRID
            });

            //var marker = new google.maps.Marker({
            //    position: myLatLng,
            //    map: map
            //});
        }



        function GameMap(description, Lat, Lng) {

            var GameLatlng = new google.maps.LatLng(Lat, Lng);

            var marker = new google.maps.Marker({
                position: GameLatlng,
                title: description, 
                map: map
            });

            document.write(description);
            document.write(" * ");
            document.write(Lat);
            document.write(" * ");
            document.write(Lng);
            document.write("<br>");
        }

</script>