在google地图上显示多个标记从$ .each循环中获取api v3

Question

我试图在使用API​​ V3的Google地图上获取多个标记。 我想要显示的标记是一个名为beachflag.png的粉红色正方形。当我的程序到达setMarkers函数时，在$ .each循环中创建的数组内部的值将丢失。警报功能显示为未定义。我不明白这是如何实现的，因为我已经在脚本的开头声明了这个数组（全局）。 但是，当循环遍历位置数组的底部for循环只有一个值时。我推入数组的所有值（位置，纬度和长度）都消失了。我一直在关注v3的谷歌示例api的示例（https://google-developers.appspot.com/maps/documentation/javascript/examples/icon-complex?hl=fr-FR），但它并不适合我。 这是我的实际测试页： otakufinder

var userLat=""; 

var userLong=""; 

var map; 

var eventsLat=[]; 

var eventsLong=[]; 

locations=[]; 

var i=0; 

    jQuery(window).ready(function(){ 

       jQuery("#btnInit").click(initiate_geolocation); 

      }); 

      function initiate_geolocation() { 

       //watch position 
       navigator.geolocation.getCurrentPosition(handle_geolocation_query,handle_errors); 

      } 

      function handle_errors(error) 
      { 
       switch(error.code) 
       { 
        case error.PERMISSION_DENIED: alert("user did not share geolocation data"); 
        break; 

        case error.POSITION_UNAVAILABLE: alert("could not detect current position"); 
        break; 

        case error.TIMEOUT: alert("retrieving position timed out"); 
        break; 

        default: alert("unknown error"); 
        break; 
       } 
      } 

      function handle_geolocation_query(position){ 


       userLat=position.coords.latitude; 

       userLong=position.coords.longitude; 

       var userLocation = new google.maps.LatLng(userLat, userLong); 

       var mapOptions = { 
         zoom: 8, 
         center: userLocation, 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 

       map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions); 


       var marker= new google.maps.Marker({ 
       position: new google.maps.LatLng(userLat, userLong), 
       title: "Hello Testing", 
       clickable: true, 
       map: map 
       }); 


      var numRand = Math.floor(Math.random()*1000) 

       $.get('http://leobee.com/otakufinder/scripts/geoloco.php?userLat='+userLat+'&userLong='+userLong+'&randNum='+numRand, 



        function (data){ 


         var jsontext = data; 

         var contact = JSON.parse(jsontext); 




         $.each(contact , function() { 

          $('#otakuEvents').append(
          '<div>' 
          + this.event_name 
          + '</div><div>' 
          + this.lat +" "+this.elong 
          + 
          '</div>' 


         );// end div 
       eventsLat.push(this.lat); 

       eventsLong.push(this.elong); 

       locations.push(this.event_name); 


       });// end .each 


setMarkers(map,locations); 

function setMarkers(map, locations) { 
alert (" in setMarkers function "+ eventsLat[i]);//output undefined 
var image = new google.maps.MarkerImage('images/beachflag.png', 
new google.maps.Size(20, 32), 
new google.maps.Point(0,0), 
new google.maps.Point(0, 32)); 
var shadow = new google.maps.MarkerImage('../images/beachflag.png', 
new google.maps.Size(37, 32), 
new google.maps.Point(0,0), 
new google.maps.Point(0, 32)); 
var shape = { 
coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
type: 'poly' 
}; 

for (var i = 0; i < locations.length; i++) { 
alert (" inside for loop "+ eventsLat[i]);// output has only one variable init 
var myLatLng = new google.maps.LatLng(eventLat[i], eventLong[i]); 
var marker = new google.maps.Marker({ 
position: myLatLng, 
map: map, 
shadow: shadow, 
icon: image, 
shape: shape, 

}); 
} 
} 
      }// end data callback 

     );// end getJson 
} 

Answer 1

你有一个错字在那里，你填充eventsLat[]和eventsLong[]，但您尝试访问eventLat[]和eventLong[]这里：

​​