必應地圖與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>