0

情報ウィンドウからユーザー入力を収集しています。情報ウィンドウには、ユーザーの入力を保存するための「保存」ボタンがあります。しかし、そのボタンをクリックするときに地図もクリックすると、マーカーが別の場所に移動します。「保存」ボタンをクリックするときに情報ウィンドウを閉じる必要があります。マーカーを動かしたくありません。コードは次のとおりです。 

<body>
<script>
var infowindow, marker;
function initialize()
{
var myCenter = new google.maps.LatLng( 10.771654, 106.698285 );
var mapProp = {
center: myCenter,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("googleMap"),  
    mapProp);   

    var html = "<div>Comment:<br/>" +
           "<textarea id='text_map' cols='25' rows='4'></textarea>" + 
           "<input type='button' onclick='set_data()' value='Save'/>" + 
            "</div>";

    infowindow = new google.maps.InfoWindow({
         content: html
    });

    marker = new google.maps.Marker({
    });

    google.maps.event.addListener(map, 'click', function(event)      
    {                       
    var location = event.latLng;        
    marker.setPosition(location);
    marker.setMap(map);
        infowindow.open(map,marker);    

    });

    google.maps.event.addListener(marker, 'click', function() { 

       infowindow.open(map,marker);                     
    }); 
}

function set_data()
{
   //do something                     
   infowindow.close();                      
}
function loadScript()
{
   var script = document.createElement("script");
   script.type = "text/javascript";
   script.src = "http://maps.googleapis.com/maps/api" +    
   "/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize";
   document.body.appendChild(script);
}
window.onload = loadScript;
</script>
<div id="googleMap" style="width: 500px; height: 500px"></div>

</body>
</html>

奇妙なことに、この問題は IE 9 ではなく、FireFox と CHROME で発生します。

編集：

この問題を解決するには、イベントの伝播を停止するだけです。これが私がそれを行う方法です: イベントを関数 set_data() の引数として渡します

onclick='var イベント = 引数[0] || window.event; set_data(イベント)'

set_data に次のコード行を追加します。

e.stopPropagation();

便利なリンクを提供してくれた Berend に感謝します。

4

1 に答える 1

0

イベントは、DOMツリーをバブルアップまたはキャプチャします。残念ながら、IEはChromeやFirefoxとは異なるモデルを使用しています。http://www.quirksmode.org/js/events_order.htmlを参照してください

停止しない場合、イベントはDOMツリーの上下に伝播され続けます。これはあなたが経験することです：クリックイベントはボタンとクロムとFirefoxの地図の両方によってキャプチャされます。IEは別のモデルを使用しているため、これはIE9では発生しません。

イベントの伝播を停止するには、次を使用します。

e.stopPropagation();

解決策についてもここで説明し ます。インラインonclick属性を使用してイベントの伝播を停止する方法は？

于 2013-01-01T15:49:53.480 に答える