使用mvc4在谷歌地图中显示位置

时间:2014-12-06 17:37:44

标签: javascript asp.net-mvc-4 google-maps-api-3

我使用mvc4在谷歌地图中显示位置。我有一个模型,我通过模型得到10个lat和long值。我在观察方面使用这些值。这是我的代码:

function showLocation() {
    var mapDiv = document.getElementById('map-canvas');

    var mapOptions = {
        zoom: 12,
        mapTypeControl: true,
        zoomControl: true,
        scaleControl: true,
        streetViewControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(mapDiv, mapOptions);
    setMarkers(map);
}

function setMarkers(map){
    @foreach (var item in Model.Items)
    {
        <text>
    var infowindow = new google.maps.InfoWindow({
        map: map,
        position: new google.maps.LatLng(@item.Latitude, @item.Longitude),
        content: '@item.DateAdded.ToString("dd.MM.yyyy HH:mm:ss")'
    });

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(@item.Latitude, @item.Longitude),
                map: map,
                title: infowindow.content,
                center: new google.maps.LatLng(@item.Latitude, @item.Longitude)
            });
        </text>
    }
}
google.maps.event.addDomListener(window, 'load', showLocation);

当我运行此代码时,我收到了一些错误,例如&#34;您已在此页面上多次添加Google Maps API。这可能会导致意外错误。&#34;并在我的画布地图中显示为:enter image description here

一遍又一遍有10个地点,地图不会出现。所以你能告诉我我哪里出错吗?

1 个答案:

答案 0 :(得分:0)

我解决了这个问题。真正的代码是:

function initMap() {
    var mapDiv = document.getElementById('map-canvas');

    var mapOptions = {
        zoom: 12,
        mapTypeControl: true,
        zoomControl: true,
        scaleControl: true,
        streetViewControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(mapDiv, mapOptions);

    var infoWindows = getinfoWindows(map);
    map.setCenter(infoWindows[0].position);
    //setMarkers(map);
};

google.maps.event.addDomListener(window, 'load', initMap);

function getinfoWindows(map){
    var infos = [];
    @foreach (var item in Model.Items)
    {
        <text>
    var infowindow = new google.maps.InfoWindow({
        map: map,
        position: new google.maps.LatLng(@item.Latitude, @item.Longitude),
        content: '@item.DateAdded.ToString("dd.MM.yyyy HH:mm:ss")'
    });
    infos.push(infowindow);
    </text>
    }
    return infos;
}