в Google Maps не работает функция клика JavaScript

Question

Мой самый первый вопрос здесь. Я строю карты Google, получая данные из объекта json, полученного из внешнего php-файла, там я получаю список ресторанов (в данном случае 4 ресторана) и их информацию, и с этой информацией я строю маркеры на карте. а затем показать список ресторанов, и когда я нажимаю на название ресторана, он должен показать его на карте, от маркера, и эта функция не работает, вот код:

$(document).ready(function(){
   $.ajax({
       type:"GET",
       url:"proxy.php",
       dataType:"json",
       contentType:"text/json",
       success:function(res){
           $.post('getinfo.php', {data: res}, function(data){

                response = jQuery.parseJSON(data);  
                if (GBrowserIsCompatible()) {
                    var map = new GMap2(document.getElementById("google_map_div"));
                    map.addControl(new GLargeMapControl());
                    map.addControl(new GMapTypeControl());
                    map.setCenter(new GLatLng(0,0),0);

                    var side_bar_html = "";
                    var gmarkers = [];
                    var htmls = [];
                    var i = 0;

                    function createMarker(point,name,html) {
                        var marker = new GMarker(point);
                        GEvent.addListener(marker, "click", function() {
                          marker.openInfoWindowHtml(html);
                        });
                        gmarkers[i] = marker;
                        htmls[i] = html;
                        side_bar_html += '<a href="javascript:openInsideMap(' + i + ')">' + name + '</a><br>';
                        return marker;
                        //
                     }

                     function openInsideMap(i){
                        alert("WORKING" + i);
                        gmarkers[i].openInfoWindowHtml(htmls[i]);
                     }

                    var bounds = new GLatLngBounds();

                    for(i=0; i<response.length;i++){
                        var j = i + 1;
                        // obtain the attribues of each marker
                        var lat = parseFloat(response[i].langt);
                        var lng = parseFloat(response[i].longt);
                        var point = new GLatLng(lat,lng);
                        var html = response[i].localName + ": " + response[i].localAddress;
                        if(response[i].tapaName == ''){
                            var label = j + ". " + response[i].localName + " - " + response[i].localAddress;
                        }else{
                            var label = j + ". " + response[i].localName + " - " + response[i].localAddress + "<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + response[i].tapaName;
                        }
                        // create the marker
                        var marker = createMarker(point,label,html);
                        map.addOverlay(marker);

                        // ==== Each time a point is found, extent the bounds ato include it =====
                        bounds.extend(point);

                    }

                    document.getElementById("side_bar").innerHTML = side_bar_html;
                    map.setZoom(map.getBoundsZoomLevel(bounds));
                    map.setCenter(bounds.getCenter());
                }

           });
       }
   });

КОГДА Я ПРОСМОТРЕЛ В МОЗИЛЛЕ ИЛИ ГХРОМЕ, ЭТО СКАЗАЛ, ЧТО ФУНКЦИЯ openInsideMap (i) {НЕ ОПРЕДЕЛЕНА openInsideMap не определено

СПАСИБО ОГРОМНОЕ ЗА ВАШУ ПОМОЩЬ, И ССЫЛКА, ЧТОБЫ ПРОВЕРИТЬ, ЭТО: http://www.gsi.dec.usc.es/santiagoetapas/testStage.php

Answer 1

Большое спасибо Мэтью, я попробовал то, что вы сказали мне, но это не сработало, поэтому я немного прочитал о глобальных и локальных переменных в javascript, затем решил проблему, прежде всего, вынув:

• $ (документ) .ready

А затем я поставил функцию openInsideMap (i);вне ajax, а также поместите переменные, используемые в этой функции, вне ajax

• var gmarkers = [];

• var htmls =[];

И это прекрасно работает.Вы можете проверить по ссылке: www.gsi.dec.usc.es / santiagoetapas / testStage.php

Answer 2

openInsideMap определяется только в анонимной функции, которая запускается:

function(data){
                response = jQuery.parseJSON(data);

Это можно исправить с помощью прослушивателя событий вместо URL-адреса JavaScript. Например, предполагая, что document.getElementById("side_bar") изначально не имеет детей:

function createMarker(point,name,html) {
                        var marker = new GMarker(point);
                        GEvent.addListener(marker, "click", function() {
                          marker.openInfoWindowHtml(html);
                        });
                        gmarkers[i] = marker;
                        htmls[i] = html;
                        var newLink = document.createElement("a");
                        newLink.addEventListener("click", 
                       (function(i)
                       {
                         return function()
                         {
                           openInsideMap(i);
                         };
                       })(i), false);
                       document.getElementById("side_bar").appendChild(newLink);
                        return marker;
                        //
                     }

Теперь openInsideMap будет закрыт. Анонимная функция необходима, чтобы вы не всегда получали последнюю версию i.

А затем удалить:

document.getElementById("side_bar").innerHTML = side_bar_html;