Jquery Google Maps V3 - Информационное окно всегда привязано к одному маркеру - PullRequest
Новая
       30

Jquery Google Maps V3 - Информационное окно всегда привязано к одному маркеру

2 голосов
/ 30 марта 2011

Ниже приведен код, который я написал на основе приведенного здесь примера Демонстрация Google V3

Моя проблема заключается в нажатии на любую метку, открывающую информационное окно всегда в одной фиксированной точке, я имею в виду, если у меня есть 4 маркера marker1, marker2, marker3, marker4 .. Если я нажимаю на mark1 или mark2 или mark3 или mark4, информационное окно всегда открывается на marker4, а также информация для marker4 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery + Google Maps API v3 Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
    var map;
    var arrMarkers = [];
    var arrInfoWindows = [];

    function mapInit(){
        var centerCoord = new google.maps.LatLng(17.22, 78.29);
        var mapOptions = {
            zoom: 6,
            center: centerCoord,
            mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        map = new google.maps.Map(document.getElementById("map"), mapOptions);

        $.getJSON("mapDB.php", function(mapPoints){
                        for (var i = 0; i < mapPoints.length; i++) {
                            var marker = new google.maps.Marker({
                                                position: new google.maps.LatLng(mapPoints[i].latitude,mapPoints[i].longitude),
                                                map: map,
                                                title: "test"+i
                            });
                            arrMarkers[i] = marker;
                            var infowindow = new google.maps.InfoWindow({
                                                content: "<h3>Test this</h3>"+i
                            });
                            arrInfoWindows[i] = infowindow;
                            google.maps.event.addListener(marker, 'click', function() {
                                                infowindow.open(map, marker);
                            });


                    }

                });
    }
    $(function(){
        mapInit();

    });
</script>
<style type="text/css" media="screen">
    img { border: 0; }
    #map{
        width: 500px;
        height: 600px;;


    }
    #content {
        position: fixed;
        top: 10px;
        left: 800px;
        margin: 30px;
    }
</style>
</head>

<body>
    <div id="container">
        <div id="map"></div>
    </div>

</body>
</html>

Спасибо за вашу помощь С уважением Киран

1 Ответ

2 голосов
/ 30 марта 2011

Я думаю, у вас есть некоторые проблемы с областями видимости переменных. Не много времени копать глубже. Я собрал этот jsFiddle: http://jsfiddle.net/rcravens/T7HwX/2/

Вот код, который я обновил, чтобы заставить его работать: 

    var count = mapPoints.length;
    for (var i = 0; i < count; i++) {
        var latlng = new google.maps.LatLng(mapPoints[i].latitude,mapPoints[i].longitude);
        var title = "test" + i;
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: title
        });
        arrMarkers[i] = marker;
        var infowindow = new google.maps.InfoWindow();
        arrInfoWindows[i] = infowindow;
        marker.myHtml = "<h3>Test this " + i + "</h3>";
        google.maps.event.addListener(marker, 'click', function () {
                infowindow.setContent(this.myHtml);
                infowindow.open(map, this);
            });

    }

В основном при создании addListener.

Надеюсь, это поможет.

Bob

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...