javascript - Bing map 与 ASP.NET MVC 4.5 集成

Question

我在 map 上放置图钉时遇到问题。 我正在使用 Bing map ，我想在上面显示一些坐标。我已经按照 youtube 上的教程进行操作，但仍然无法成功。

链接在这里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;
        }
    }
    }

在我的 Controller 中，我有:

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);
        }


    }
}

最后是 View 。这是 map 和图钉。

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

map 正在运行，我没有收到任何错误。我的问题是，当我按下按钮时什么也没有发生。我想要的是，当按下按钮时，给定坐标上应该有 3 个图钉。

非常感谢您的阅读!我希望我能让它发挥作用!

Answer 1

一些问题和建议:

• 主要问题是您的纬度和经度值是字符串，并且永远不会解析为 float /数字。因此， map 在需要数字时会获取位置的字符串值。
• 您的代码使用的是 Bing map V7，不久前已被 V8 取代。 V7 的生命周期已接近尾声，将于 6 月底关闭。这是 V8 的新 map 脚本 URL:http://www.bing.com/api/maps/mapcontrol
• document.ready 会在 map 脚本加载之前很久触发，因为它是异步加载的。事实上，document.ready 有时会在整个页面加载之前触发，这意味着您的 map div 可能不可用。我建议使用 map 脚本UR的回调参数:例如:http://www.bing.com/api/maps/mapcontrol?callback=LoadMap
• 您正在循环中设置 map View ，这应该可以工作，但会导致大量额外的刷新，从而降低加载性能。
• 一些建议:
  • 将图钉添加到数组中，然后将该数组添加到 map 中。这将减少所需的刷新次数。
  • 将脚本移动到页面底部并最后调用 map 脚本 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;
        }
    }
}

您的 Controller :

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>