GMAP3 Google Map API 3 クラスの使用。javascript を介して外部リンクからマーカーのクリック イベントをトリガーする方法がよくわかりません。v3 API 構文を試してみましたが、GMAP3 ライブラリに関して何か不足していると思われます。誰か助けてくれませんか？
結果のJSON配列を使用して、ajaxリクエストからのマーカーとインフォボックスデータを含むマップを表示しています。よく働く。クリック イベントをマーカーに割り当てると、正常に動作します。同じJSON配列の解析を使用して、データテーブルに<a href="#" id="link" arid="X">Click Me</a>
X は実際には、JSON 配列を構築するときに使用したインクリメント マーカー カウンターであるため、0 から始まり、すべてのマーカーを表す任意の値に構築されます。この値を使用して、クリックイベントを渡すマーカーをGMAP3に伝えることを期待しています...これがプロセスが間違っている場合、私は本当に混乱しています。
JSON配列オブジェクトはmarkerlistに保存され、以下の関数に渡されます...これはうまく機能しますが、データテーブルリンクからそれらのクリックをトリガーできないようです... (以下のjqueryコードを参照して、それらのクリックを取得して渡してみてください地図に沿って）
私のマップコードは次のとおりです。
function display( markerlist ) {
$("#map").gmap3({action:'clear'});
$("#map").gmap3(
{action: 'init',
options:{
center:true,
zoom:13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
scrollwheel: true,
streetViewControl: true
}
},
{action: 'addMarkers',
radius:100,
markers: markerlist,
clusters:{
maxZoom: 10,
// This style will be used for clusters with more than 0 markers
20: {
content: '<div class="cluster cluster-1">CLUSTER_COUNT</div>',
width: 53,
height: 52
},
// This style will be used for clusters with more than 20 markers
50: {
content: '<div class="cluster cluster-2">CLUSTER_COUNT</div>',
width: 56,
height: 55
},
// This style will be used for clusters with more than 50 markers
100: {
content: '<div class="cluster cluster-3">CLUSTER_COUNT</div>',
width: 66,
height: 65
}
},
marker: {
options: {
clickable: true
},
events:{
click: function(marker,event,data) {
$(this).gmap3({action: 'clear', name : 'infowindow'});
$(this).gmap3({action: 'addinfowindow', anchor: marker, options: { content:
'<div class="text"><strong><div style="color:navy;">' + data.itype + '</strong><br/><div id="address" snum="' + data.streetnum + '" snam="' + data.streetnam + '" styp="' + data.streettyp + '">'+ data.iaddress +'</div><br/>' + data.inum + '<br/>'+ data.datetime +'</div><hr>'+data.notes+'</div>'} })
},
mouseover: function(marker, event, data){
$(this).gmap3(
{ action:'clear', name:'overlay'},
{ action:'addOverlay',
latLng: marker.getPosition(),
content: '<div class="infobulle">' +
'<div class="bg"></div>' +
'<div class="text">' + data.itype +'</div>' +
'</div>' +
'<div class="arrow"></div>',
offset: {
x:-46,
y:-73
}
});
},
mouseout: function(){
$(this).gmap3({action:'clear', name:'overlay'});
}
}, //end events
callback: function(result){
if (result){
//not doing anything with a callback at this time
} else {
alert('Bad callback...');
}
} //end callbacks
} // end marker
}
,{action:"autofit"} //end action
);
$("a#link").live('click',function(markerlist){ // this works and I can get my arid ok, but the trigger won't work
var arid = $(this).attr('arid');
google.maps.event.trigger(markerlist[arid], 'click');
return false;
});
};
どんな助けも本当にありがたいですし、他の人に役立つと確信しています!