Маркер Google Maps как ссылка - PullRequest
       6

Маркер Google Maps как ссылка

5 голосов
/ 24 февраля 2011

У меня есть следующий код, но он не работает, только ссылка показана на последнем пункте (Аргентина), какая-то помощь?

<div id="map" style="width: 980px; height: 420px;margin:10px 0px 30px;"></div>

<script type="text/javascript">
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: new google.maps.LatLng(0,0),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var usa = new google.maps.LatLng(37.09024, -95.712891);
    var brasil = new google.maps.LatLng(-14.235004, -51.92528);
    var argentina = new google.maps.LatLng(-38.416097, -63.616672);

    var marker = new google.maps.Marker({
        position: usa,
        url: '/destinos/exibir/pais_id/3',
        title: 'Estados Unidos',
        map: map
    });

    var marker = new google.maps.Marker({
        position: brasil,
        url: '/destinos/exibir/pais_id/2',
        title: 'Brasil',
        map: map
    });

    var marker = new google.maps.Marker({
        position: argentina,
        url: '/destinos/exibir/pais_id/1',
        title: 'Argentina',
        map: map
    });

    google.maps.event.addListener(marker, 'click', function() {
      window.location.href = marker.url;
    });

  </script>

Ответы [ 3 ]

11 голосов
/ 24 февраля 2011

jsfiddle демо с модификацией, дополняющей пример @hsz:

Проблема в том, что у вас есть маркер, объявленный 3 раза, и прикрепите только событие клика к тому, который был объявлен последним. Итак, вы должны объявить 3 разных имени для 3 разных маркеров и прикрепить каждый из них к событию onclick. Лучше, если вы делаете это в массиве или что-то

var markers = [];

markers[0] = new google.maps.Marker({
    position: usa,
    url: '/destinos/exibir/pais_id/3',
    title: 'Estados Unidos',
    map: map
});

markers[1] = new google.maps.Marker({
    position: brasil,
    url: '/destinos/exibir/pais_id/2',
    title: 'Brasil',
    map: map
});

markers[2] = new google.maps.Marker({
    position: argentina,
    url: '/destinos/exibir/pais_id/1',
    title: 'Argentina',
    map: map
});

for ( i = 0; i < markers.length; i++ ) {
    google.maps.event.addListener(markers[i], 'click', function() {
      window.location.href = this.url;  //changed from markers[i] to this
    });
}
4 голосов
/ 24 февраля 2011

Вы даете каждому маркеру одно и то же имя переменной, поэтому я думаю, что ссылка 'marker' будет указывать только на последний (Аргентина).

Вы можете попробовать дать им отдельные имена и привязать слушателя к каждому из них в отдельности.

3 голосов
/ 12 мая 2011

Просто добавив этот ответ для дальнейшего использования для всех, если он понадобится

Отправьте подробности в другую функцию createMarker

createMarker(pos,title,weburl)
{
marker = new google.maps.Marker({
position: pos,
title: title,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
  window.location.href = weburl;  
});
}

Спасибо Тому Эллиотту за указание на проблему, я использоваллогика похожа на kjy112

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