必应地图与ASP.NET MVC 4.5集成

Question

即时通讯在我的地图上获取图钉时遇到问题。 即时通讯使用Bing地图，我想显示一些坐标。我在YouTube上跟随了一个教程，但仍然无法完成。

链接在这里https://www.youtube.com/watch?v=uVeuib8_MWw&t=2s

所以这是我得到了什么！ 在我的类模型，我得到

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 

namespace Map.Models 
{ 
    public class Locations 
    { 
     public string latitude { get; set;} 
     public string longitude { get; set;} 

     public Locations(string latitude, string longitude) 
     { 
      this.latitude = latitude; 
      this.longitude = longitude; 
     } 
    } 
    } 

在我的控制，我有：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
namespace Map.Controllers 
{ 
    public class HomeController : Controller 
    { 
     public ActionResult Index() 
     { 
      return View(); 
     } 

     public ActionResult GetLocations() 
     { 
      var locations = new List<Models.Locations>() 
      { 
       new Models.Locations("12.505353","55.335292"), 
       new Models.Locations("13.505353","55.485292"), 
        new Models.Locations("13.655353","55.665292") 

      }; 
      return Json(locations, JsonRequestBehavior.AllowGet); 
     } 


    } 
} 

，并在结束其观点。这里是地图以及图钉。

@{ 
    ViewBag.Title = "Home Page"; 
} 
<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script> 
<script type="text/javascript"> 

    $(document).ready(function() { 

     var map = null; 
     function LoadMap() { 
      map = new Microsoft.Maps.Map(
       document.getElementById('myMap'), 
       { 
        credentials: "Bing map key" 
       }); 

    } 
     LoadMap(); 

     $('#btnShowLocations').click(function() { 
      var url = "/Home/GetLocations"; 
      $.getJSON(url, null, function (data) { 
       $.each(data, function (index, LocationData) { 

        var pushpin = new Microsoft.Maps.pushpin(map.getCenter(), null); 
        pushpin.setLocation(new Microsoft.Maps.Location(
         LocationData.latitude, 
         LocationData.longitude)); 

        map.entities.push(pushpin); 
        map.setView({ 
         zoom: 4, center: new Microsoft.Maps.Location(23.505353, 78.485292) 
        }); 

       }); 

      }); 
     }); 
    }); 
</script> 

<h2>Bing Map integration in ASP.NET</h2> 
<input type="button" id="btnShowLocations" value ="Show All Locations" /> 

<div id="myMap" style="position:relative; width:600px; height:600px;"> 


</div> 

该地图工作，我没有得到任何错误。我的问题是，当我按下按钮什么都没有发生。我想要的是，当按下按钮时，应该在给定的坐标上有3个图钉。

非常感谢您的阅读！我希望我能得到它的工作！

Answer 1

的几个问题和建议：

• 的主要问题是，你的纬度和经度值是字符串，并且从不解析为花车/数字。因此，当地图期待数字时，地图会获取位置的字符串值。
• 您的代码正在使用前一段时间被V8取代的Bing Maps V7。 V7即将结束，将在6月底关闭。这是V8的新地图脚本URL：http://www.bing.com/api/maps/mapcontrol
• document.ready将在地图脚本加载之前很长时间才会加载，因为它会异步加载。事实上，document.ready有时会在整个页面加载之前触发，这意味着您的地图div可能不会提供事件。我建议使用地图脚本UR的回调参数：例如：http://www.bing.com/api/maps/mapcontrol?callback=LoadMap
• 您正在设置循环中的地图视图，这应该有效，但会导致大量额外的刷新，加载性能。
• 几个建议：
  • 将你的图钉添加到数组，然后将数组添加到地图。这将减少所需的刷新次数。
  • 将脚本移动到页面的底部，并在异步加载后最后调用映射脚本URL。当地图脚本被缓存并按下“刷新”时，回调将在加载其他代码之前立即被调用。将这行代码移动到底部，可以让您的页面以最快的速度加载。

下面是一些建议修改你的代码：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 

namespace Map.Models 
{ 
    public class Locations 
    { 
     public double latitude { get; set;} 
     public double longitude { get; set;} 

     public Locations(double latitude, double longitude) 
     { 
      this.latitude = latitude; 
      this.longitude = longitude; 
     } 
    } 
} 

你的控制器：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 

namespace Map.Controllers 
{ 
    public class HomeController : Controller 
    { 
     public ActionResult Index() 
     { 
      return View(); 
     } 

     public ActionResult GetLocations() 
     { 
      var locations = new List<Models.Locations>() 
      { 
       new Models.Locations(12.505353,55.335292), 
       new Models.Locations(13.505353,55.485292), 
        new Models.Locations(13.655353,55.665292) 
      }; 
      return Json(locations, JsonRequestBehavior.AllowGet); 
     } 
    } 
} 

您的看法：

@{ 
    ViewBag.Title = "Home Page"; 
} 

<h2>Bing Map integration in ASP.NET</h2> 
<input type="button" id="btnShowLocations" value ="Show All Locations" /> 

<div id="myMap" style="position:relative; width:600px; height:600px;"></div> 

<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script type="text/javascript"> 
var map = null; 

function LoadMap() { 
    map = new Microsoft.Maps.Map('#myMap', { 
      credentials: "Bing map key" 
     }); 
} 

$('#btnShowLocations').click(function() { 
    var url = "/Home/GetLocations"; 
    $.getJSON(url, null, function (data) { 
     var pins = []; 

     $.each(data, function (index, LocationData) { 
      var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(
       LocationData.latitude, 
       LocationData.longitude)); 

      pins.push(pushpin); 
     }); 

     map.entities.push(pins); 

     map.setView({ 
      zoom: 4, center: new Microsoft.Maps.Location(23.505353, 78.485292) 
     }); 
    }); 
}); 
</script> 
<script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?callback=LoadMap" async defer></script>