1

私はグーグルマップv3でコーディングしています。jQuery を追加し、イベント ハンドラーを infoBubble (ここで入手したカスタマイズ可能な infoWindow jscript 拡張機能) にアタッチしたいと考えています。

具体的には、ユーザーに infoBubble のリンクをクリックさせ、jQuery-UI を使用してダイアログ フォームをポップアップさせたいと考えています。ダイアログ フォームはユーザーに入力を求めるプロンプトを表示し、入力はその後 MySQL に保存されます。

私はこれで1か月間立ち往生しています。これは私が来た最も近いものでした：

Google マップの情報バブル内の要素にイベント ハンドラーをアタッチする

以下は、マップ マーカーを作成するために使用する JavaScript 関数です。

(注: イベント ハンドラーを infoBubble にアタッチすることが機能する場合function() {alert("hi!");}、jQuery-UI フォームに置き換えます。しかし、機能しません。「var str = 'onClick=formPopUp()';」を使用してみましたが、javascript は、複数のエントリを持つプロンプト ダイアログ フォームをサポートしていません。また、formPopUp() のような javascript 関数内で jQuery-UI 呼び出しを行う方法もよくわかりません。混乱していたらごめんなさい)

function createMarker(map, latlng, fields, name) {
      var str = "id='user-creates'";

      var html = "<b><font size='5'>" + fields["name"] + "</font></b>" + "</br>" + 
             "<font size='2'>" + fields["google_rating"] + " / 5.00" + "</font>" + "</br>" + 
                 "<font size='2'>" + fields["type"] + "</font>" + "</br>" + 
                 "<font size='2'>" + "Hours" + "</font>" + "</br>" + 
                 "</br>" + 
                 "</br>" +
                 "<font size='2'>" + "Top Reviews " + "(<i>" + fields["num_reviews"] + " Reviews</i>)" +  "</font>" + "</br>" + 
                 "<div " + str + ">" +  "Example</div>" + 
                 "</br>" + 
                 "</br>" + 
                 "<font size='2'>" + "Photos " + "(<i>0 Photos</i>)" + "</font>" + "</br>" +
                 "</br>" + 
                 "</br>" +
                 "<font size='2'>" + "Friends Who've Been Here " + "(<i>0 Friends</i>)" + "</font>" + "</br>" +
                 "</br>" + 
                 "</br>" +
                 "<font size='2'>" + fields["address"] + "</font>" + "</br>" + 
                 "<font size='2'>" + fields["phone_num"] + "</font>" + "</br>" + 
                 "<font size='2'><a href=" + fields["web_url"] + "Website" + "</a></font>";


      var marker = new google.maps.Marker({
            map: map,
            position: latlng
      });

      infoBubble = new InfoBubble({
            map: map,
            position: latlng,
            borderColor: '#D14836',
            borderWidth: 4,     
      });

      google.maps.event.addListener(marker, 'click', function() {
        infoBubble.setContent(html);

        google.maps.event.addListenerOnce(infoBubble, 'domready', function(){
             //jQuery code here
             google.maps.event.addDomListener($(infoBubble.getContent()).find('#user-creates')[0], 
                                'click', function() {alert("hi!")}); 

        });

        infoBubble.open(map, marker); 

        });

    }
4

1 に答える 1

0

この文字列：

var str = 'id=user-creates';

HTMLに埋め込むための正しい形式ではありません。

次のようにする必要があります。

var str = "id='user-creates'";
于 2013-01-16T15:33:17.287 に答える