谷歌地图Api v3触发器问题,外部链接命中信息窗口

时间:2010-07-07 21:01:39

标签: javascript google-maps google-maps-api-3

所以我的代码看起来像这样,多个标记:

var m1 = new google.maps.Marker(
   new google.maps.LatLng(35.2602340, -93.7939480), 
   {icon:tinyIcon,bouncy:1}
);

google.maps.Event.addListener(m1, "click", function() {
   m1.openInfoWindowHtml(   
      '1<br />test,TX'
   );
});

map.addOverlay(m1);

var m2 = new google.maps.Marker(
   new google.maps.LatLng(35.2810510, -93.8246510), 
   {icon:tinyIcon,bouncy:1}
);

google.maps.Event.addListener(m2, "click", function() {
    m2.openInfoWindowHtml(
        'test<br />test,Texas'
    );
});

map.addOverlay(m2);

如何让它在外部工作?

href="google.maps.Event.trigger(1, 'click');">Something</>

2 个答案:

答案 0 :(得分:3)

要触发其中一个标记的点击事件,您只需执行以下操作:

<a href="javascript:google.maps.event.trigger(m1, 'click');">Trigger Click on m1</a>

但是,您的代码中似乎还有一些其他问题,因为您正在混合v2 APIv3 API中的方法。例如,v3 API中不存在addOverlay()openInfoWindowHtml()方法。

因此,您的代码看起来应该像这样使用v3 API:

var map = new google.maps.Map(document.getElementById("map"), {
   zoom: 11,
   center: new google.maps.LatLng(35.26, -93.80),
   mapTypeId: google.maps.MapTypeId.ROADMAP
});

// You only need one InfoWindow object
var infowindow = new google.maps.InfoWindow();

// Create the markers, and keep a reference to them
var m1 = new google.maps.Marker({
  position: new google.maps.LatLng(35.2602340, -93.7939480),
  map: map
});

var m2 = new google.maps.Marker({
  position: new google.maps.LatLng(35.2810510, -93.8246510),
  map: map
});

// Add the events listeners on the markers
google.maps.event.addListener(m1, 'click', function() {
  infowindow.setContent('1<br />test,TX');
  infowindow.open(map, m1);
});

google.maps.event.addListener(m2, 'click', function() {
  infowindow.setContent('test<br />test,Texas');
  infowindow.open(map, m2);
});

答案 1 :(得分:3)

如果您处理大量标记:

var map;
var markers = []; // declared EXTERNALLY (and m1 and m2 in the examples above)

function setupMarkers() {

    var markersLayer =  new Array();
    markersLayer = [
        [52.26326, 21.673675], // marker #0
        [52.67328, 21.865789], // marker #1
        [52.34366, 21.348797]  // marker #2 etc.
    ];

    for (var i = 0; i < markersLayer.length; i++) {
    // or: for (var i in markersLayer) {
        var myLatLng = new google.maps.LatLng(markersLayer[i][0], markersLayer[i][1]);
        var marker = new google.maps.Marker({..., position: myLatLng, ...});
        google.maps.event.addListener(marker, 'click', function() {...}); 
        markers.push(marker);
    }

}

function initialize() {
    ...
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    ...
    setupMarkers();
}

function launchInfoWindow(x) {
    // window.scroll(0, 0);
    // markers[x].setMap(map);
    google.maps.event.trigger(markers[x], "click");
}

HTML:
<a href="javascript:launchInfoWindow(2);">...</a>