谷歌地图与多个标记不出现 [英] google map with multiple markers is not appearing

问题描述

我想在Google地图上显示多个标记。我正在使用每个循环遍历包含经度和纬度的模型列表。但函数被调用，并且不显示地图。

code：

 < div id =map_canvasstyle =width：80％;身高：80％> < / DIV> 
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js> 
< / script> 
< script type =text / javascriptsrc =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）; 
 
 
 @ *这是剃须刀循环* @ 
 @foreach（模型中的var项）{
< text> 
 locations.push（item.latitude，item.longitude）; 
 
< / text> 
} 
 var i; 
 for（i = 0; i< = locations.length; i ++）{
 var latlng = new google.maps.LatLng位置[i] [0]，位置[i] [1]）; 
 
 var marker = new google.maps.Marker（{
 position：latlng，
 map：地图，
}）; 
 
} 
 
}）; 
< / script> 
  

解决方案

您试过这个：

$ b

  $（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 （'var x = 0; 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）; 
 google.maps.Marker（{
位置：latlng，
 map：map 
}）; 
 
}）; 
} 
  

} ）;

嵌入的Javascript代码：

http://jsfiddle.net/P2QhE/

I want to display multiple markers on google map.I am using for each loop to iterate over the model list that contains latitude and longitude.But function is called and it does not show a map.

code:

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

解决方案

Have you try this :

$(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 code embedded aswell:

http://jsfiddle.net/P2QhE/

这篇关于谷歌地图与多个标记不出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！