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

Question

我使用 mvc4 在谷歌地图中显示位置。我有一个模型，我通过模型获得 10 个纬度和经度值。我在我的 View 中使用这些值。这是我的代码:

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

当我运行此代码时，我收到一些错误，例如“您已在此页面上多次包含 Google Maps API。这可能会导致意外错误。”在我的 Canvas map 中显示为:

一遍又一遍地出现 10 个位置，但 map 没有出现。那你能告诉我哪里出错了吗？

Answer 1

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

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