Клуб API Карт

Добавление ссылки в метку на карте

Адель Усманов
11 июля 2013, 15:51

Сделал карту со своими метками на карте (Под катом код). В каждой метке (вместо стандартной метки - свой файл logo.png ) прописана какая-нибудь ссылка (т.е. жмакаем по метке на карте - переходим куда нам нужно).

Проблема: когда добавлены все метки и добавлены ссылки в каждой метке, то работает только последняя добавленная ссылка (сейчас там youtube.com).

Помогите решить проблему. В чем глюк? 

<!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>

    <title>Пример.</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 

    <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"

            type="text/javascript"></script>

    <script type="text/javascript">

        // Как только будет загружен API и готов DOM, выполняем инициализацию

        ymaps.ready(init);

 

        objs = [{point: [48.46454, 35.047048], name:"Название", address:'Сити', link:"http://google.com"},

            {point: [48.460807, 35.050173], name:"Название", address:'Сити', link:"http://mail.ru"},

            {point: [48.466762, 35.050904], name:"Название", address:'Сити', link:"http://facebook.com"},

            {point: [48.471438, 35.040658], name:"Название", address:'Сити', link:"http://yandex.ru"},

            {point: [48.465772, 35.042709], name:"Название", address:'Сити', link:"http://vk.com"},

            {point: [48.457451, 35.060411], name:"Название", address:'Сити', link:"http://youtube.com"}];

 

        function init () {

            var myMap = new ymaps.Map("map", {

                    center: [48.46, 35.05],

                    zoom: 14

                });

 

            myMap.controls

                // Кнопка изменения масштаба.

                    .add('zoomControl', { left: 5, top: 5 })

                // Список типов карты

                    .add('typeSelector')

                // Стандартный набор кнопок

                    .add('mapTools', { left: 35, top: 5 });

 

            for (var i = 0; i < objs.length; i++) {

                var o = objs[i];

 

                var  myPlacemark = new ymaps.Placemark(o.point, {

                    // Свойства

                    balloonContentHeader: "",

                    balloonContentBody: "<b><font size='smaller'>"+ o.name +"</font></b><br>" + o.address

                }, {

                    // Опции

                    iconImageHref: 'logo.png',

                    iconImageSize: [32, 32],

                    iconImageOffset: [-16, -16],

                    iconShadow: true,

                    openBalloonOnClick: false,

                    hideIconOnBalloonOpen: false,

                    balloonCloseButton: false

                });

                myMap.geoObjects.add(myPlacemark);

 

                myPlacemark.events.add('click', function () {

                    document.location = o.link;

                });

            }

 

            myMap.geoObjects.options.set({

                showHintOnHover: false

            });

 

            myMap.geoObjects.events.add('mouseenter', function (e) {

                var geoObject = e.get('target'),

                        position = e.get('globalPixelPosition'),

                        balloon = geoObject.balloon.open(position);

 

                balloon.events.add('mouseleave', function () {

                    balloon.close();

                });

                geoObject.events.add('mouseleave', function () {

                    balloon.close();

                });

            });

 

        }

    </script>

</head>

 

<body>

 

<div id="map" style="width:600px;height:500px"></div>

</body>

 

</html>

 

4 комментария
Подписаться на комментарии к посту
В javascript при присваивании
var o = objs[i];
переменная o принимает ссылку на  objs[i]
При каждой итерации цикла o меняет ссылку на следующий элемент. В конечном итоге o ссылается на последний элемент перебора и при клике на любую метку переходит на ваш youtube.com.
Адель Усманов
11 июля 2013, 16:38

напишите, пожалуйста, как это должно быть. Что изменить в коде? лучше не словами, а кодом :)

самый простой способ - обернуть всё внутри цикла в self-invoking-function

вместо:

 

for (var i = 0; i < objs.length; i++) {    var o = objs[i];    ...}

нужно:

 

for (var i = 0; i < objs.length; i++) {    (function (o) {        ...    }(objs[i]));}

 

Адель Усманов
12 июля 2013, 20:30

спасибо :)