ASP.Net MVC——“谷歌的 MarkerManager”

Question

一直在追一只兔子，是时候在我进入这个兔子洞之前寻求帮助了。我一直在尝试用多个标记实现谷歌地图。我试图使用我在 ChangSu 的技术博客https://csjlsolutions.wordpress.com/2013/07/11/how-to-put-multiple-markers-in-google-map-in-mvc-4/ 上找到的代码。我设法让我的谷歌地图显示，但没有显示任何标记。使用浏览器的开发工具，发现java脚本找不到谷歌的MarkerManager。又看了看，我使用 Package Manager Console 安装了 Jmelosegui.Mvc.Googlemap（版本 0.8.0.0）（参见http://www.jmelosegui.com/map/）。

安装此包后，我开始收到新错误：

检测到 ASP.NET 网页版本冲突：指定版本为“1.0.0.0”，但 bin 中的版本为“3.0.0.0”。继续从应用程序的 bin 目录中删除文件或删除 web.config 中的版本规范

环顾四周，并将我的 web.config 更新到版本 3（它是版本 1.0.0.0）

add key="webpages:Version" value="3.0.0.0" /

现在我有语法错误。

@foreach（模型中的变量位置）{

        var myLatLng = new google.maps.LatLng("@place.MonumentLocationLat", "@place.MonumentLocationLong");

不确定以哪种方式打开此功能。我应该从头开始吗？

Answer 1

我认为，当我安装 Jmelosegui.Mvc.Googlemap 时，它确实在某处搞砸了。我收到关于版本不匹配和各种奇怪事情的错误。我已经回退到我的代码的以前版本（不是备份很好）并设法让我的地图显示。我

我的解决方案

控制器

        // -------------------- Display a Map of the Battlefield showing the location of all of the monuments that have been entered to the DB  -------------------------------------------------
    public ActionResult MapMonuments(string battleRecID)
    {

        var monumentMap = from s in db.Monuments
                          where ((s.MonumentBattleRecID == battleRecID) &&

                            (s.MonumentStatus == "A"))

                          select s;


        ViewBag.avgLat = monumentMap.Average(s => s.MonumentLocationLat);
        ViewBag.avgLong = monumentMap.Average(s => s.MonumentLocationLong);


        return PartialView(monumentMap.ToList());
    }

查看

@model IEnumerable<CWBFM.Models.Monument>

  // avgLat  = the average of all of the latitudes
  // avgLong = the average of all of the longitudes

    Int_Map("@ViewBag.avgLat", "@ViewBag.avgLong");

//所有的乐趣都发生在哪里

function Int_Map(avgLat, avgLong) {


    var latlng = new google.maps.LatLng(avgLat, avgLong);

    // These are options that set initial zoom level, where the map is centered globally to start, and the type of map to show
    var mapOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        panControl: true,
        zoomControl: true,
        streetViewControl: true,
        mapTypeControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
        }

    }

    // This makes the div with id "map_canvas" a google map

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

    // place a marker on the map for each monument

    @foreach (var place in Model) {

    <text>
    var myLatLng = new google.maps.LatLng("@place.MonumentLocationLat", "@place.MonumentLocationLong");
    var markerTitle = "@place.MonumentName"; // input the monuments name from the database
    var URL = "http://cwbfm.org/Monument/MonumentDetails/" + "@place.MonumentID"; // create the url to link to the monuments detail page

    // set the marker icon based on the Allegiance
    switch ("@place.MonumentAllegiance") {
        case "B":
            var image = 'http://maps.google.com/mapfiles/kml/paddle/grn-circle.png';
            break;
        case "C":
            var image = 'http://maps.google.com/mapfiles/kml/paddle/red-circle.png';
            break;
        case "U":
            var image = 'http://maps.google.com/mapfiles/kml/paddle/blu-circle.png';
            break;
        default:
            var image = 'http://maps.google.com/mapfiles/kml/paddle/ylw-circle.png';
    }

    var myMarker = new google.maps.Marker({
        position: myLatLng,
        icon: image,
        title: markerTitle,
        url: URL,
        map: map
    });

        // on click, go to the monuments detail page
        google.maps.event.addListener(myMarker, "click", function () {
          window.location.href = this.url;
      });


    </text>


} return

}

这对我来说很好。