Bing 地图与 ASP.NET MVC 4.5 集成

Question

我无法在我的地图上获取图钉。我正在使用 Bing 地图，我想在上面显示一些坐标。我已经按照 youtube 上的教程进行操作，但仍然无法成功。

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

这就是我得到的！在我的 class 模型中，我得到了

    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

几个问题和建议：

主要问题是您的纬度和经度值是字符串，永远不会被解析为 floats/numbers。因此，地图在需要数字时会获取位置的字符串值。
您的代码使用的是 Bing Maps V7，不久前被 V8 取代。 V7 的生命周期即将结束，将于 6 月底关闭。这是新映射脚本 URL 到 V8：http://www.bing.com/api/maps/mapcontrol
document.ready 将在地图脚本加载异步加载之前很久触发。事实上，document.ready 有时会在整个页面加载之前触发，这意味着您的地图 div 可能不可用。我建议使用地图脚本UR的回调参数：例如：http://www.bing.com/api/maps/mapcontrol?callback=LoadMap
您正在循环设置地图的视图，这应该可行，但会导致大量额外的无意义刷新，这会降低加载性能。
一些建议：
- 将图钉添加到数组，然后将数组添加到地图。这将减少所需的刷新次数。
- 将您的脚本移至页面底部并最后调用地图脚本 URL，因为它是异步加载的。当地图脚本被缓存并按下 "refresh" 时，回调会立即被调用，并且通常在加载其余代码之前调用。将这行代码移到底部可以让您的页面以最快的速度加载。

以下是对您的代码的一些修改建议：

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>

Bing 地图与 ASP.NET MVC 4.5 集成

Bing Map Integration with ASP.NET MVC 4.5

javascript

youtube

asp.net

asp.net-mvc

bing-maps