2014-04-17 76 views
0

我想在谷歌地圖上顯示多個標記。我用於每個循環遍歷包含經度和緯度的模型列表。但函數被調用,它不顯示地圖。谷歌地圖與多個標記不出現

代碼:

 <div id="map_canvas" style="width: 80%; height: 80%"> </div> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
    </script> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js? 
     sensor=false"></script> 
     <script type="text/javascript"> 
$(document).ready(function() { 
    alert("working"); 
    var map; 
    var locations = []; 

    var options = { 
     zoom: 14, 
     center: new google.maps.LatLng(0, 0), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map($('#map_canvas')[0], options); 


    @* This is the razor loop *@ 
    @foreach (var item in Model) { 
    <text> 
    locations.push(item.latitude, item.longitude); 

    </text> 
    } 
    var i; 
    for (i = 0; i <= locations.length; i++) { 
     var latlng = new google.maps.LatLng(locations[i][0], locations[i][1]); 

     var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
     }); 

    } 

}); 
</script> 

回答

0

你有沒有嘗試這個辦法:

$(document).ready(function() { 
var map; 
var elevator; 
var myOptions = { 
    zoom: 1, 
    center: new google.maps.LatLng(0, 0), 
    mapTypeId: 'terrain' 
}; 
map = new google.maps.Map($('#map_canvas')[0], myOptions); 

var addresses = ['Norway', 'Africa', 'Asia','North America','South America']; 

for (var x = 0; x < addresses.length; x++) { 
    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) { 
     var p = data.results[0].geometry.location 
     var latlng = new google.maps.LatLng(p.lat, p.lng); 
     new google.maps.Marker({ 
      position: latlng, 
      map: map 
     }); 

    }); 
} 

});

Javascript代碼嵌入藏漢:

http://jsfiddle.net/P2QhE/

+0

檢查我的更新d code.i使用類似的方法,但地圖沒有顯示 – Wasfa

+0

哪裏是你的div

+0

它上面的腳本tag.i已經更新了我代碼 – Wasfa

1

這是行不通的:

var latlng = new google.maps.LatLng(markerlatLng); 

markerlatLng已經是google.maps.LatLng,其結果將是無效的經緯度。

使用markerlatLng作爲center - 屬性爲options

另外:你應該從循環中分離出來的地圖創建。在循環後循環之前創建的地圖AMD設置中心:

map.setCenter(markerlatLng); 

此外: 標記的地圖屬性必須是mapmap_canvas