1

外部テーブルからマーカーの情報ウィンドウを開く方法はありますか? 「stackoverflow」で他のユーザーからの他の投稿も見ましたが、達成するのは少し難しいようです。

使用しているコードは次のとおりです。コードの最後の 2 行では、ツイートをテーブルに追加しています。そこから、いずれかのツイートをクリックしたい場合は、対応するマーカーをマップ上で開く必要があります。問題は、マーカーとテーブル行をリンクする方法がわからないことです。

            function geocode(user, date, profile_img, text, url, location) {
                var geocoder = new google.maps.Geocoder();
                geocoder.geocode({
                    address: location
                }, function (response, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        var x = response[0].geometry.location.lat(),
                            y = response[0].geometry.location.lng();
                        var myLatLng = new google.maps.LatLng(x, y);
                        var marker = new google.maps.Marker({
                            icon: profile_img,
                            title: user,
                            map: map,
                            position: myLatLng
                        });
                        var contentString = '<div id="content">' + '<div id="siteNotice">' + '</div>' + '<h2 id="firstHeading" class="firstHeading">' + user + '</h2>' + '<div id="bodyContent">' + text + '</div>' + '<div id="siteNotice"><a href="' + url + '"></a></div>' + '<p>Date Posted- ' + date + '.</p>' + '</div>';


                        var infowindow = new google.maps.InfoWindow({
                            content: contentString
                        });
                        google.maps.event.addListener(marker, 'click', function () {
                            infowindow.open(map, marker);
                        });

                $('#user-tweets').css("overflow","scroll");
                $('#user-tweets').append('<table width="320" border="0"><tr><td onclick=infoWindow(map,marker); colspan="2" rowspan="1">'+user+'</td></tr><tr><td width="45"><a href="'+profile_img+'"><img src="'+profile_img+'" width="55" height="50"/></a></td><td width="186">'+text+'</td></tr></table><hr>');
                        function infoWindow(map,marker){

                            infowindow.open(map, marker);
                        }
                        bounds.extend(myLatLng);
4

1 に答える 1

2

AK 47、

提供されたコードの後に​​、閉じていない括弧と中括弧がすべて閉じているという前提で...

最初に、外側のスコープで長い HTML 文字列のテンプレートを作成します。外部function geocode(){}- 必要になるたびにではなく、一度定義される場所。

var templates = [];
templates[0] = '<div><div></div><h2 class="firstHeading">%user</h2><div>%text</div><div><a href="%url"></a></div><p>Date Posted- %date.</p></div>';
templates[1] = '<table width="320" border="0"><tr><td class="user" colspan="2" rowspan="1">%user</td></tr><tr><td width="45"><a href="%profile_img"><img src="%profile_img" width="55" height="50" /></a></td><td width="186">%text</td></tr></table><hr />';

テンプレートが使用されるたびに繰り返される ID を削除したことがわかります。繰り返されるとIDは目的を失います。

var contentString = ...;次に、 から までのすべてをに置き換えますfunction infoWindow(map,marker){...}。

var infowindow = new google.maps.InfoWindow({
    content: templates[0].replace('%user',user).replace('%text',text).replace('%url',url).replace('%date',date);
});
var $tweet = $(templates[1].replace('%user',user).replace(/%profile_img/g,profile_img).replace('%text',text));
$('#user-tweets').css("overflow","scroll").append($tweet);
function openInfoWindow() {
    infowindow.open(map, marker);
}
google.maps.event.addListener(marker, 'click', openInfoWindow);
$tweet.find(".user").on('click', openInfoWindow);

function openInfoWindow()パラメータを受け入れないことがわかります。map代わりに、クロージャーを介してピックアップしmarkerます (それらは外側のスコープで定義されます)。これにより、マーカー クリックとopenInfoWindowツイート クリックのハンドラーとして 2 つの場所に名前を付けることができます (これが必要です)。

仮定を立てる必要があったため、これは 100% 正しいとは限りませんが、少なくとも問題へのアプローチ方法については理解できるはずです。

于 2012-09-01T09:31:42.827 に答える