觸發infoWindow或InfoBox點擊Google Map API V3觸發事件

我想知道如何使用Google Maps API v3點擊infoWindow時觸發事件。在這個例子中，當我點擊一個標記時，一個信息窗口顯示一個唯一的消息，基於我點擊的標記。我想也可以點擊信息窗口，並有警報顯示出來，說觸發infoWindow或InfoBox點擊Google Map API V3觸發事件

「你點擊的信息窗口的（__ 填寫空白位置 _）

我發現使用谷歌地圖API V2和jQuery的一些例子，但不是隻是普通的老谷歌地圖API V3。

<!doctype html> 
<html lang="en"> 
<head> 
    <title>jQuery mobile with Google maps - Google maps jQuery plugin</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script> 
    <script type="text/javascript"> 

    var cityList = [ 
    ['Chicago', 41.850033, -87.6500523, 1], 
    ['Illinois', 40.797177,-89.406738, 2] 
    ]; 

    var demoCenter = new google.maps.LatLng(41,-87); 

    var map; 
    function initialize() 
    { 
     map = new google.maps.Map(document.getElementById('map_canvas'), { 
      zoom: 7, 
      center: demoCenter, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     addMarkers(); 
    } 

    function addMarkers() 
    { 
     var marker, i; 
     var infowindow = new google.maps.InfoWindow(); 
     for (i = 0; i < cityList.length; i++) 
     { 
      marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(cityList[i][1], cityList[i][2]), 
       map: map, 
       title: cityList[i][0] 
      }); 

      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       var contentString = '<div id="infoWindow">' 
        +'<div id="bodyContent">' 
        +'<p>' 
        + "This location is:<br>" 
        + marker.title 
        +'</p>' 
        +'</div>' 
        + '</div>'; 
       return function() { 
        infowindow.setContent(contentString); 
        infowindow.open(map, marker); 
        google.maps.event.addListener(infowindow, 'click', (function(i){ 
         alert("You clicked on the infowindow for" + cityList[i][0]); 
        })); 
       } 
       })(marker, i)); 
      } 
     } 

</script> 
    </head> 
    <body onload="initialize()"> 
     <div id="basic-map" data-role="page"> 
      <div data-role="header"> 
       <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1> 
       <a data-rel="back">Back</a> 
      </div> 
      <div data-role="content"> 
       <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"> 
        <div id="map_canvas" style="height:350px;"></div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

更新我最終爲InfoBox弄清楚了這一點，它在我的答案中包含在下面。

來源

2012-08-24 erin

您可能有興趣使用snazzy-info-window作爲替代。 https://github.com/atmist/snazzy-info-window/blob/master/examples/dynamic-content/scripts.js – Zypps987

好吧，我想通了這一點爲infoWindow，但後來我也想通了對InfoBox因爲它漂亮，更加個性化。我是JavaScript新手，這些關閉可能非常棘手。

對於infoWindow

<!doctype html> 
<html lang="en"> 
<head> 
    <title>jQuery mobile with Google maps - Google maps jQuery plugin</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script> 
    <script type="text/javascript"> 

    var cityList = [ 
    ['Chicago', 41.850033, -87.6500523, 1], 
    ['Illinois', 40.797177,-89.406738, 2] 
    ]; 

    var demoCenter = new google.maps.LatLng(41,-87); 

    var map; 
    function initialize() 
    { 
     map = new google.maps.Map(document.getElementById('map_canvas'), { 
      zoom: 7, 
      center: demoCenter, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     addMarkers(); 
    } 

    var boxText1 = document.createElement("div"); 
      boxText1.id = "boxText1"; 
      boxText1.className = "labelText1"; 
      boxText1.innerHTML = "title1";//this is created earlier 
    var boxList = []; 

    function addMarkers() 
    { 
     var marker, i; 
     var infowindow = new google.maps.InfoWindow({ 
      disableAutoPan: true 
      ,isHidden:false 
      ,pixelOffset: new google.maps.Size(-10, -10) 
      ,closeBoxURL: "" 
      ,pane: "mapPane" 
      ,enableEventPropagation: true 
     }); 
     for (var i = 0; i < cityList.length; i++) 
     { 
      marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(cityList[i][1], cityList[i][2]), 
       map: map, 
       id: i, 
       title: cityList[i][0] 
      }); 

      var boxText = document.createElement("div"); 
      boxText.id = i; 
      boxText.className = "labelText" + i; 
      boxText.innerHTML = cityList[i][0]; 
      boxList.push(boxText); 

      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       var contentString = '<div id="infoWindow">' 
        +'<div id="bodyContent">' 
        +'<p>' 
        + "This location is:<br>" 
        + marker.title 
        +'</p>' 
        +'</div>' 
        + '</div>'; 

       return function() { 
        infowindow.setContent(boxList[this.id]); 
        infowindow.open(map, marker); 
       } 
       })(marker, i)); //end add marker listener 

       google.maps.event.addDomListener(boxList[i],'click',(function(marker, i) { 
         return function() { 
          alert('clicked ' + cityList[i][0]) 
         } 
         })(marker, i)); 
      } //endfor    
     }//end function 

</script> 
    </head> 
    <body onload="initialize()"> 
     <div id="basic-map" data-role="page"> 
      <div data-role="header"> 
       <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1> 
       <a data-rel="back">Back</a> 
      </div> 
      <div data-role="content"> 
       <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"> 
        <div id="map_canvas" style="height:350px;"></div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

對於InfoBox

<!doctype html> 
<html lang="en"> 
<head> 
    <title>jQuery mobile with Google maps - Google maps jQuery plugin</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script> 
    <script type="text/javascript" 
    src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"> </script> 
    <script type="text/javascript" 
    src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js"> </script> 
    <script type="text/javascript"> 

    var cityList = [ 
    ['Chicago', 41.850033, -87.6500523, 1], 
    ['Illinois', 40.797177,-89.406738, 2] 
    ]; 

    var demoCenter = new google.maps.LatLng(41,-87); 
    var boxList =[]; 

    function initialize() { 
     map = new google.maps.Map(document.getElementById('map_canvas'), { 
      zoom: 7, 
      center: demoCenter, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     addMarkers(); 
    } 

    function addMarkers(){ 
     for (var i = 0; i < cityList.length; i++) 
     { 
      marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(cityList[i][1], cityList[i][2]), 
       map: map, 
       id: i, 
       title: cityList[i][0] 
      });   

      var boxText = document.createElement("div"); 
      boxText.id = i; 
      boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;"; 
      boxText.innerHTML = "InfoBox for " + cityList[i][0]; 

      var myOptions = { 
       content: boxText 
       ,disableAutoPan: false 
       ,maxWidth: 0 
       ,pixelOffset: new google.maps.Size(-140, 0) 
       ,zIndex: null 
       ,boxStyle: { 
        background: "url('tipbox.gif') no-repeat" 
        ,opacity: 0.75 
        ,width: "280px" 
       } 
       ,closeBoxMargin: "10px 2px 2px 2px" 
       ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif" 
       ,infoBoxClearance: new google.maps.Size(1, 1) 
       ,isHidden: false 
       ,pane: "floatPane" 
       ,enableEventPropagation: false 
      }; 

      var ib = new InfoBox(myOptions); 
      boxList.push(ib); 

      google.maps.event.addListener(marker,'click',(function(marker, i) { 
       return function() { 
        boxList[i].open(map, this); 
       } 
      })(marker, i)); 

      google.maps.event.addDomListener(boxList[i].content_,'click',(function(marker, i) { 
        return function() { 
         alert('clicked ' + cityList[i][0]) 
        } 
        })(marker, i)); 
     } //endfor 
    } //end function 

    </script> 
</head> 
<body onload="initialize()"> 
    <div id="basic-map" data-role="page"> 
     <div data-role="header"> 
      <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1> 
      <a data-rel="back">Back</a> 
     </div> 
     <div data-role="content"> 
      <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"> 
       <div id="map_canvas" style="height:350px;"></div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

來源

2012-08-24 08:09:48 erin

感謝您的示例代碼。 – rpelluru

如果我對Infobox執行點擊功能，它會調用標記中的點擊功能。請你幫忙解決這個問題。請在標記點擊時添加警報以調試問題。 – rpelluru

我寫的代碼是這樣的：打開一個標記點擊Infobox，然後，一旦信息框打開，如果你點擊，你會得到一個提醒。你是否想做一些與此不同的事情？ – erin

的信息窗口對象沒有一個 'click' 事件，所以你不能做

google.maps.event.addListener(infowindow, 'click',....

相反，你可以將一個事件處理程序的DOM對象，如

function addMarker(latLng, name){ 

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

G.event.addListener(marker,'click',function(mev){ 
     var div = document.createElement('div'); 
     div.innerHTML = name; 
     div.onclick = function(){iwClick(name)}; 
     infoWindow.setContent(div); 
     infoWindow.setPosition(mev.latLng); 
     infoWindow.open(map); 

    }); 
} 

function iwClick(str){ 
    alert(str); 
};

和你

var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
addMarker(chicago,'chicago');

來源

2012-08-24 08:23:13 Marcelo

感謝名單電話了！艾琳是那個男人！你解決了我的問題！我現在甩了4天！如果你對他們不熟悉，那麼在*中關閉是很痛苦的。

這是我的工作代碼（Sencha Touch 2和Google maps API v3）。它將允許一個infowindow開放。

var openedInfoWindow = null; 
var boxList = []; 
var marker, i; 

//build info box object 
var infoWindow = new google.maps.InfoWindow({ 
    enableEventPropagation: true, 
}); 

//handle close 
google.maps.event.addListener(infoWindow, 'closeclick', function() { 
    openedInfoWindow = null; 
}); 

//loop trough store data... 
for(i in data) { 
    //data 
    var itemData = data[i].getData(); 

    //marker 
    var geopos = new google.maps.LatLng(itemData['lat'], itemData['lng']); 
    var marker = new google.maps.Marker({ 
     position: geopos, 
     //icon: image, 
     map: map, 
     title: itemData['title'], 
     id: i, 
     animation: google.maps.Animation.DROP 
    }); 

    //add info window content to DOM 
    var boxText = document.createElement("div"); 
    boxText.id = i; 
    boxText.className = "labelText" + i; 
    boxText.data = itemData; 
    boxText.innerHTML = '<b>' + itemData['title'] + '</b>' + (itemData['distance'] ? ' (' + itemData['distance'] + ')' : '') + '<br />' + (itemData['address'] != itemData['title'] ? itemData['address'] : '') + (itemData['price'] ? '<br />' + itemData['price'] : '') + '<br /><a class="button">Meer info</a>'; 
    boxList.push(boxText); 

    //add marker click event 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     if (openedInfoWindow != null) 
      openedInfoWindow.close(); 

     return function() { 
      infoWindow.setContent(boxList[this.id]); 
      infoWindow.open(map, marker); 
      openedInfoWindow = infoWindow; 
     } 
    })(marker, i)); 

    //when infowindow is clicked, open view... 
    google.maps.event.addDomListener(boxList[i],'click',(function(marker, i) { 
     return function(){ 
      iStuddy.app.pushView('kames_detail',boxList[i].data); 
     } 
    })(marker, i)); 
}

來源

2012-09-09 21:14:12 Daantje

我無法在[infoWindow對象規範]（https://developers.google.com/maps/documentation/javascript/）上找到關於'enableEventPropagation'的任何文檔參考＃InfoWindowOptions）（版本3.24） – edigu

觸發infoWindow或InfoBox點擊Google Map API V3觸發事件

回答

相關問題