在google map api v3上显示来自$ .each循环的多个标记 [英] Display multiple Markers on google map api v3 from $.each loop

问题描述

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

I'm trying to get multiple markers on a Google map using API V3. The marker I want to show is a pink square named beachflag.png. When my program gets to the setMarkers function the values inside the arrays created in the $.each loop are lost. The alert function displays undefined. I don't see how this is possible because I've declared this arrays at the beginning of the script (global). However, when the for loop at the bottom that iterates through the location array it has only one value. All the values I pushed into the arrays(location, lat, and elong) are gone. I have been following an example from google sample api for v3(https://google-developers.appspot.com/maps/documentation/javascript/examples/icon-complex?hl=fr-FR) and it is not working for me. here is my live test page: 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
 }

推荐答案

你有一个拼写错误，你正在填充事件 s Lat [] 和事件 s Long [] ，但您尝试访问 eventLat [] 和 eventLong [] here：

You have a typo there, you are populating eventsLat[] and eventsLong[] , but you try to access eventLat[] and eventLong[] here:

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

这篇关于在google map api v3上显示来自$ .each循环的多个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！