mvc4:将位置信息传递给地理定位的javascript变量

时间:2013-03-25 14:39:53

标签: javascript jquery asp.net-mvc-4

我是mvc和jquery的新手。 我想通过在数据库中的多个城市替换它们来替换位置。我想知道我是怎么做到这一点的。

function initialize() {

    var locations = [
        ['Hougang', 1.37265, 103.893658],
        ['Punggol', 1.400617, 103.907833],
        ['MacRitchie Reservoir', 1.346002, 103.825436],
        ['Bishan', 1.352051, 103.849125],
        ['Sentosa', 1.251226, 103.830757]
        ];

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 0,
        center: new google.maps.LatLng(1.37265, 103.893658),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }

    // Check if user support geo-location
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            var geolocpoint = new google.maps.LatLng(latitude, longitude);

            var mapOptions = {
                zoom: 8,
                center: geolocpoint,
                mapTypeId: google.maps.MapTypeId.HYBRID
            }
            // Place a marker
            var geolocation = new google.maps.Marker({
                position: geolocpoint,
                map: map,
                title: 'Your geolocation',
                icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
            });
        });
    }
}
google.maps.event.addDomListener(window, 'load', initialize);


</script>

这些线路上会出现问题吗?问题是我不知道如何连接两者。

public JsonResult Autolocations()
        {
            var locations = from s in db.Tble_content
                              select s.EN_Title;
            // return namelist.ToList();
            return Json(locations, JsonRequestBehavior.AllowGet);
        }

非常感谢提前 碎甲弹

1 个答案:

答案 0 :(得分:1)

您应该使用ajax将控制器与视图连接,如下所示

$(document).ready(function() {

    $.getJSON("/Locations/Autolocations", null, function (locations) {
          initialize(locations);
    });
});

function initialize(locations) {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 0,
        center: new google.maps.LatLng(1.37265, 103.893658),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    //the rest of your javascript code
}

你的控制器应该是这样的

public class LocationsController : Controller    
{
    public JsonResult Autolocations()
    {
        var locations = from s in db.Tble_content
                          select s;
        return Json(locations.ToList(), JsonRequestBehavior.AllowGet);
    }
}