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[]：

var myLatLng = new google.maps.LatLng(eventLat[i], eventLong[i]);

在$ .each循环中在google map api v3上显示多个标记

1 个答案: