Question

我正在尝试根据放置在JSON中的坐标来放置标记，但我认为我没有把事情做得很安静。

    public class Stadiums
{
    public int ID { get; set; }

    public string Team { get; set; }

    public decimal Latitude { get; set; }

    public decimal Longitude { get; set; }
}


public void GetStadiums()
    {
        var con = ConfigurationManager.ConnectionStrings["NFLConnectionString"].ToString();

        List<Stadiums> matchingStadiums = new List<Stadiums>();
        using (SqlConnection myConnection = new SqlConnection(con))
        {

            string oString = "Select * from Stadiums";
            SqlCommand oCmd = new SqlCommand(oString, myConnection);
            myConnection.Open();
            using (SqlDataReader oReader = oCmd.ExecuteReader())
            {
                while (oReader.Read())
                {
                    matchingStadiums.Add(new Stadiums
                    {
                        Team = oReader["Team"].ToString(),
                        ID = Convert.ToInt32(oReader["ID"]),
                        Latitude = Convert.ToDecimal(oReader["Latitude"]),
                        Longitude = Convert.ToDecimal(oReader["Longitude"])
                    });
                }

                ResultstoJSON(matchingStadiums);

                myConnection.Close();
            }
        }
    }
    public void ResultstoJSON(List<Stadiums> stadiums)
    {
        var jsonSerialiser = new JavaScriptSerializer();
        var json = jsonSerialiser.Serialize(stadiums);
        this.JSONData = json;
    }

我已经确认JSONData包含我以JSON格式寻找的所有数据。从这里开始，我不知道如何获取数据并在谷歌地图中放置引脚。

@{
Layout = null;
}

<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
    html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }
</style>

<script src="https://maps.googleapis.com/maps/api/js?     v=3.exp&signed_in=true"></script>
<script>
    var myLatlng = new google.maps.LatLng(37.09024, -95.712891);

    function initialize() {
        var mapOptions = {
            zoom: 5,
            center: new google.maps.LatLng(37.09024, -95.712891)
        };
       var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

        var marker = new google.maps.Marker({
            position: (myLatlng),
            map: map,
            title: 'Hello World!'
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

链接到JSON数据：http://pastebin.com/cJBDi3ti

再次，澄清一点，我正在尝试根据JSON数据中的项目（具有坐标）在Google地图中放置图钉/标记。

Answer 1

查看您提供的内容和您的JSON，

您的控制器需要将json标记数据返回给客户端 - 目前您还没有返回任何内容。

在客户端中，一旦json将其解析为对象：

var markerData = JSON.parse(json);

然后在创建地图后 - 循环遍历markerData数组中的每个项目，并根据其纬度和经度值为其创建标记：

$.each(markerData,function()
{
     var myLatlng = new google.maps.LatLng(this.Latitude, this.Longitude);

       var marker = new google.maps.Marker({
        position: (myLatlng),
         data:this,
        map: map,
        title: 'Hello World!'
    });                
}

这是一个帮助你的JS fildle

http://jsfiddle.net/loanburger/4wtyqmrg/

用于在Google地图中放置标记的JSON数据

1 个答案: