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

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 格式的数据。从这里开始，我不知道如何获取数据并在 Google 地图中放置图钉。

@{
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>

Link 至 JSON 数据：http://pastebin.com/cJBDi3ti

再次澄清一下，我试图根据 JSON 数据（具有坐标）中的项目将 pins/markers 放置在 Google 地图中。

Answer 1

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

您的控制器将需要 return 向客户端发送 json 标记数据 - 目前您没有 returning 任何东西。

一旦您将 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 文件可以帮助你

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

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

JSON data to place markers in Google Maps

c#

json

google-maps