如何使用javascript和ASP.NET MVC在Google地图中获取VieBag数据

使用我的代码，我反序列化了包含旅游景点的城市的Json对象。每个旅游景点都有名称、文字、地理坐标和图像。在我的控制器类中，我反序列化了所有这个对象，并将所有这些数据放在ViewBag中。我在控制器类中获取名称和json反序列化的代码如下-

 public ActionResult Index(City objCityModel)
    {
        string name = objCityModel.Name;
        return View();
    }
 public ActionResult GoogleMap(City objCityModel)
    {
        string name = objCityModel.Name;
        ViewBag.Title = name;

        var ReadJson = System.IO.File.ReadAllText(Server.MapPath(@"~/App_Data/POI_Json/" + name + ".json"));

        RootObject json = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<RootObject>(ReadJson);
        List<Poi> mycities = new List<Poi>();

        foreach (var item in json.poi)
        {
            Poi obj = new Poi()
            {
                Name = item.Name,
                Shorttext = item.Shorttext,
                GeoCoordinates = item.GeoCoordinates,
                Images = item.Images,

            };
            mycities.Add(obj);
        }

        ViewBag.Cities = mycities;

        return View();

    }

公共行动结果索引（城市对象模型）
{
string name=objCityModel.name；
返回视图（）；
}
公众行动结果谷歌地图（城市目标模型）
{
string name=objCityModel.name；
ViewBag.Title=名称；
var ReadJson=System.IO.File.ReadAllText（Server.MapPath（@“~/App_Data/POI_Json/“+name+”.Json”）；
RootObject json=new System.Web.Script.Serialization.JavaScriptSerializer（）.Deserialize（ReadJson）；
List mycities=新列表（）；
foreach（json.poi中的var项）
{
Poi obj=新Poi（）
{
名称=项。名称，
Shorttext=项目。Shorttext，
地理坐标=项。地理坐标，
Images=item.Images，
};
mycities.Add（obj）；
}
ViewBag.Cities=mycities；
返回视图（）；
}

我创建了一个搜索框来获取进入谷歌地图视图的名称。我给出这个代码只是为了理解-

@using (Html.BeginForm("GoogleMap", "Home"))
   {
    <div class="wrapper wrapper-content">
        @Html.TextBoxFor(m => m.Name)
        <label for="somevalue">City Name</label>

        <div class="input-group-btn">
            <button id="mapViewBtn" class="btn btn-primary" type="submit">Map View</button>
            }
        </div>
    </div>
}

使用（Html.BeginForm（“谷歌地图”、“主页”）） { @Html.TextBoxFor（m=>m.Name） 城市名称 地图视图 } } 现在我的问题是谷歌地图视图。我正在学习如何在谷歌地图中使用我所有的查看包数据。我使用下面的链接来编写代码。嗯，我在用我的方式尝试，但没有成功。我只想使用Javascript而不是Ajax。但这根本不起作用。我的代码如下-

 public ActionResult Index(City objCityModel)
    {
        string name = objCityModel.Name;
        return View();
    }
 public ActionResult GoogleMap(City objCityModel)
    {
        string name = objCityModel.Name;
        ViewBag.Title = name;

        var ReadJson = System.IO.File.ReadAllText(Server.MapPath(@"~/App_Data/POI_Json/" + name + ".json"));

        RootObject json = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<RootObject>(ReadJson);
        List<Poi> mycities = new List<Poi>();

        foreach (var item in json.poi)
        {
            Poi obj = new Poi()
            {
                Name = item.Name,
                Shorttext = item.Shorttext,
                GeoCoordinates = item.GeoCoordinates,
                Images = item.Images,

            };
            mycities.Add(obj);
        }

        ViewBag.Cities = mycities;

        return View();

    }

修改代码

<meta name="viewport" content="width=device-width" />
<title>GoogleMap</title>
 <script src="http://maps.google.com/maps/api/js?sensor=true"    type="text/javascript"></script>


<style>
 #map_canvas img{max-width:none}
 </style>

 <style>
 .infoDiv {
 height: 200px;    
 width: 300px; 
 -webkit-user-select: none; 
 background-color: white; 
 }
 </style>


   <div id="map_canvas" style="height: 600px;"></div>


    @section scripts {
        <section class="scripts">

    <script type="text/javascript">


        $(document).ready(function () {
            Initialize();
        });


         function Initialize() {


        google.maps.visualRefresh = true;
        var @ViewBag.Title = new google.maps.LatLng(53.408841, -2.981397);


        var mapOptions = {
            zoom: 14,
            center: Liverpool,
            mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP
        };


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


    var myLatlng = new google.maps.LatLng(53.40091, -2.994464);

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


    marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

    var cities = JSON.parse('@Html.Raw(Json.Encode(ViewBag.Cities))');

       $.each(cities , function(index, obj){

        var marker = new google.maps.Marker({
            'position': new google.maps.LatLng(item.GeoLong, item.GeoLat),
            'map': map,
            'title':obj.Name
        });




        var infowindow = new google.maps.InfoWindow({
            content: "<div class='infoDiv'><h2>" + 
              item.Name + "</h2>" + "<div><h4>Opening hours: " + 
              item.ShortText + "</h4></div></div>"
        });


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

     })
   }


  </script>
  </section>
  }

谷歌舆图
#映射\u画布img{最大宽度：无}
.infoDiv{
高度：200px；
宽度：300px；
-webkit用户选择：无；
背景色：白色；
}
@节脚本{
$（文档）.ready（函数（）{
初始化（）；
});
函数初始化（）{
google.maps.visualRefresh=true；
var@ViewBag.Title=new google.maps.LatLng（53.408841，-2.981397）；
变量映射选项={
缩放：14，
中心：利物浦，
mapTypeId:google.maps.mapTypeId.G_NORMAL_地图
};
var map=new google.maps.map（document.getElementById（“map_canvas”），mapOptions）；
var mylatng=new google.maps.LatLng（53.40091，-2.994464）；
var marker=new google.maps.marker({
职位：myLatlng，
地图：地图，
标题：泰特美术馆
});
marker.setIcon（'http://maps.google.com/mapfiles/ms/icons/green-dot.png')
var cities=JSON.parse（'@Html.Raw（JSON.Encode（ViewBag.cities）））；
美元。每个（城市，功能（索引，obj）{
var marker=new google.maps.marker({
“位置”：新的google.maps.LatLng（item.GeoLong，item.GeoLat），
“地图”：地图，
“title”：obj.Name
});
var infowindow=new google.maps.infowindow({
内容：“+
项目名称+“+”开放时间：“+
item.ShortText+“”
});
google.maps.event.addListener（标记，'click'，函数（）{
信息窗口。打开（地图、标记）；
});
})
}
}

使用

@Html.Raw和json将包含poi列表的
视图包
转换为json数组。编码

，然后使用循环遍历数组

<script>
 var cities = JSON.parse('@Html.Raw(Json.Encode(ViewBag.Cities))');
 $.each(cities , function(index, obj){
    //here obj contains the POI information
    console.log(obj.GeoCoordinates);
 });
</script>

var cities=JSON.parse（'@Html.Raw（JSON.Encode（ViewBag.cities）））；
美元。每个（城市，功能（索引，obj）{
//这里obj包含POI信息
控制台日志（对象地理坐标）；
});

首先将c#对象转换为Json，如下所示

在上面的cshtml页面中写下这个

   @{   
     var jsonData = Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.Cities);
    }

然后在脚本块内可以执行此操作

<script>
      var citiesList= JSON.parse(@Html.Raw(Json.Encode(jsonData)));
      alert(citiesList);
  </script>

var citiesList=JSON.parse（@Html.Raw（JSON.Encode（jsonData））；
警报（城市名单）；

---

如果您有任何问题，请告诉我

您能再解释一下吗？我对处理这个案件非常陌生。非常感谢你。您还可以告诉我应该在代码中的哪个位置使用它吗。@AntonyInn您必须使用

$。每个（ViewBag.Cities，function（I，item）

这里。我已经更新了答案，我也修改了我的问题，但所有内容都没有了。现在，列表中没有显示任何内容view@AntonyInn任何控制台错误。您想在javascript变量中使用viewbag数据吗？？？@Reddy是的。我想使用从控制器到javascript的所有viewbag数据。我会给您我的答案。您能解释一下吗还有一点。我应该在Javascript之前使用你的代码吗？我修改了问题中的代码。但是Google地图视图消失了，什么也没有显示你在警报中得到了什么？？我收到了错误，找不到文件“I:\PoiFinder\PoiFinder\PoiFinder\App\u Data\POI\u Json\.Json”。第74行：var ReadJson=System.IO.file.ReadAllText（Server.MapPath（@“~/App_Data/POI_Json/“+name+”.Json”）；因此您会在警报中看到这一点？？我认为这与我的代码无关。。