如何在标记图中使用链接将数据标记传递到另一个页面?

时间:2016-02-20 06:55:03

标签: javascript google-maps asp.net-mvc-4 google-maps-api-3

我的MVC代码中有一张地图。当载荷图在地图上显示一些标记时。因此,当点击标记时,此标记的数据将传递到另一页并在新页面上显示标记信息。

for (i = 0; i < (alarm.length) ; i++) {
            marker = new google.maps.Marker({

                position: new google.maps.LatLng(alarm[i][0], alarm[i][1]),
                map: map, icon: '/Content/alarm.png',
                url: 'http://localhost/Alarm/Index/'+alarm[i][3]
            });
            google.maps.event.addListener(marker, 'mouseover', (function (marker, i) {
                return function () {
                    infowindow.setContent("<br/> No: " + alarm[i][2] + "<br/> Serial: " + alarm[i][3] );
                    infowindow.open(map, marker);
                }
            })
            (marker, i));
            marker.addListener('mouseout', function () {
                infowindow.close();
            });

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

这是我的代码,但是当点击任何标记时,它会显示所有标记的相同信息。

1 个答案:

答案 0 :(得分:1)

您需要为标记“click”侦听器以及标记“mouseout”侦听器获取功能。我建议使用createMarker函数而不是许多匿名函数闭包。但您可以使用“click”侦听器中的this来访问其.url属性(将marker.url更改为this.url)。

for (i = 0; i < (alarm.length) ; i++) {
   createMarker(alarm[i]);
}
function createMarker(alarm) {
  var marker = new google.maps.Marker({
        position: new google.maps.LatLng(alarm[0], alarm[1]),
        map: map, icon: '/Content/alarm.png',
        url: 'http://localhost/Alarm/Index/'+alarm[3]
      });
   google.maps.event.addListener(marker, 'mouseover', function (evt) {
     infowindow.setContent("<br/> No: " + alarm[2] + "<br/> Serial: " + alarm[3] );
     infowindow.open(map, marker);
   });
   marker.addListener('mouseout', function () {
     infowindow.close();
  });
  google.maps.event.addListener(marker, 'click', function () {
     window.location.href =marker.url ;
  });
}