微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

在视图ASP.NET MVC中从数据库到Google地图的多个地图标记问题

如何解决在视图ASP.NET MVC中从数据库到Google地图的多个地图标记问题

我在从数据库中的视图中加载多个地图标记时遇到问题,问题是它仅显示数据库中的最后一个地图标记,我不确定是什么问题。

viewmodel代码

public int NpoID { get; set; }
public string NpoName { get; set; }
public string VerificationStatus { get; set; }
public double Longitude { get; set; }
public double Latitude { get; set; }

控制器代码

public static List<DonatorUserviewmodel> MapMarkerList = new List<DonatorUserviewmodel>();

public JsonResult GetMarkers()
{
    //Map marker section
    var DynamicMapMarkers = db.tblNpo.Include(zz => zz.tblVerification);

    DonatorUserviewmodel MapMarkers = new DonatorUserviewmodel();

    //Set map marker values
    foreach (var item in DynamicMapMarkers)
    {
       MapMarkers.NpoID = item.npo_id;
       MapMarkers.NpoName = item.npo_name;
       MapMarkers.VerificationStatus = item.tblVerification.description;
       MapMarkers.Longitude = Convert.Todouble(item.longitude);
       MapMarkers.Latitude = Convert.Todouble(item.latitude);

       MapMarkerList.Add(MapMarkers);
    }

       var json = MapMarkerList;
       return Json(json,JsonRequestBehavior.AllowGet);
    }

查看代码(用于Google Maps API的Javascript):

function myMap() {
    var mapProp = {
        center: new google.maps.LatLng(-25.754549,28.231448),zoom: 11,disableDefaultUI: true,fullscreenControl: true
    };

    var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

        $.get("@Url.Action("GetMarkers","Donator")",function (json,status) {

            //Global infoWindow object that will be reused by all markers
            var infoWindow = new google.maps.InfoWindow();
            var marker,data;

            //Loop through the json data
            for (var i = 0; i < json.length; i++) {
                data = json[i];
                LatLng = new google.maps.LatLng(data.Latitude,data.Longitude)

                //Creating marker and putting it on the map
                marker = new google.maps.Marker({
                    position: LatLng,map: map,title: data.NpoName
                });

                // Creating a closure to retain the correct data,notice how I pass the current data in the loop into the closure (marker,data)
                (function (marker,data) {
                    // Attaching a click event to the current marker
                    google.maps.event.addListener(marker,"click",function (e) {
                        infoWindow.setContent(data.NpoName);
                        infoWindow.open(map,marker);
                    });

                })(marker,data);
            };
};

因此,为了更加清楚起见,例如,我在数据库中有3个不同的行,并且每行都有自己的经度和纬度,我希望得到的结果是,这三行将在我的Google地图上表示3个不同的地图标记,但是发生的情况是,只有最后一行在地图上获得了标记,而不是所有3个标记。任何帮助将不胜感激。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。