单击 Google Map API V3 时使用 infoWindow 或 InfoBox 触发事件 [英] Trigger event with infoWindow or InfoBox on click Google Map API V3

查看：27
本文介绍了单击 Google Map API V3 时使用 infoWindow 或 InfoBox 触发事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想知道如何在使用 Google Maps API v3 单击信息窗口时触发事件.在这个例子中，当我点击一个标记时，一个信息窗口会根据我点击的标记显示一条独特的消息.我还希望能够单击信息窗口并显示一个警报，内容为

<块引用>

您点击了信息窗口(__填写空白位置_)

我发现了一些使用 Google Maps API v2 和 jQuery 的示例，但不只是简单的旧 Google Maps API v3.

<html lang="zh-cn"><头><title>带有谷歌地图的 jQuery 移动版 - 谷歌地图 jQuery 插件</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 type="text/javascript">var cityList = [['芝加哥'，41.850033，-87.6500523，1]，['伊利诺伊州', 40.797177,-89.406738, 2]];var demoCenter = new google.maps.LatLng(41,-87);无功地图；函数初始化(){map = new google.maps.Map(document.getElementById('map_canvas'), {变焦:7，中心:演示中心，mapTypeId: google.maps.MapTypeId.ROADMAP});添加标记()；}函数 addMarkers(){var 标记，我；var infowindow = new google.maps.InfoWindow();for (i = 0; i < cityList.length; i++){标记 = 新的 google.maps.Marker({位置:新 google.maps.LatLng(cityList[i][1], cityList[i][2])，地图:地图，标题:cityList[i][0]});google.maps.event.addListener(marker, 'click', (function(marker, i) {var contentString = '
'+'
'+'
'+ "这个位置是:<br>"+ 标记.title+'
'+'
'+ '</div>';返回函数(){infowindow.setContent(contentString);infowindow.open(地图，标记)；google.maps.event.addListener(infowindow, 'click', (function(i){alert("您点击了信息窗口" + cityList[i][0]);}));}})(标记, i));}}<body onload="初始化()"><div id="basic-map" data-role="page"><div data-role="header"><h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a>示例<a data-rel="back">Back</a>
<div data-role="内容"><div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"><div id="map_canvas" style="height:350px;"></div>

更新我最终也为 InfoBox 解决了这个问题，这包含在我的答案中.

解决方案

好的，我为 infoWindow 解决了这个问题，但后来我也为 InfoBox 解决了这个问题，因为它更漂亮，更可定制.我是 JavaScript 的新手，这些闭包可能非常棘手.

对于infoWindow

<html lang="zh-cn"><头><title>带有谷歌地图的 jQuery 移动版 - 谷歌地图 jQuery 插件</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 type="text/javascript">var cityList = [['芝加哥'，41.850033，-87.6500523，1]，['伊利诺伊州', 40.797177,-89.406738, 2]];var demoCenter = new google.maps.LatLng(41,-87);无功地图；函数初始化(){map = new google.maps.Map(document.getElementById('map_canvas'), {变焦:7，中心:演示中心，mapTypeId: google.maps.MapTypeId.ROADMAP});添加标记()；}var boxText1 = document.createElement("div");boxText1.id = "boxText1";boxText1.className = "labelText1";boxText1.innerHTML = "title1";//这是之前创建的var boxList = [];函数 addMarkers(){var 标记，我；var infowindow = new google.maps.InfoWindow({disableAutoPan: 真,isHidden:false,pixelOffset: 新的 google.maps.Size(-10, -10),closeBoxURL: ""，窗格:地图窗格",enableEventPropagation: 真});for (var i = 0; i < cityList.length; i++){标记 = 新的 google.maps.Marker({位置:新 google.maps.LatLng(cityList[i][1], cityList[i][2])，地图:地图，身份证:我，标题: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 = '
'+'
'+'
'+ "这个位置是:<br>"+ 标记.title+'
'+'
'+ '</div>';返回函数(){infowindow.setContent(boxList[this.id]);infowindow.open(地图，标记)；}})(标记, i));//结束添加标记监听器google.maps.event.addDomListener(boxList[i],'click',(function(marker, i) {返回函数(){警报('点击' + cityList[i][0])}})(标记, i));}//结束}//结束函数<body onload="初始化()"><div id="basic-map" data-role="page"><div data-role="header"><h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a>示例<a data-rel="back">Back</a>
<div data-role="内容"><div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"><div id="map_canvas" style="height:350px;"></div>

对于InfoBox

<html lang="zh-cn"><头><title>带有谷歌地图的 jQuery 移动版 - 谷歌地图 jQuery 插件</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"><脚本类型=文本/javascript"src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"><脚本类型=文本/javascript"src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js"><script type="text/javascript">var cityList = [['芝加哥'，41.850033，-87.6500523，1]，['伊利诺伊州', 40.797177,-89.406738, 2]];var demoCenter = new google.maps.LatLng(41,-87);var boxList =[];函数初始化(){map = new google.maps.Map(document.getElementById('map_canvas'), {变焦:7，中心:演示中心，mapTypeId: google.maps.MapTypeId.ROADMAP});添加标记()；}函数添加标记(){for (var i = 0; i < cityList.length; i++){标记 = 新的 google.maps.Marker({位置:新 google.maps.LatLng(cityList[i][1], cityList[i][2])，地图:地图，身份证:我，标题:cityList[i][0]});var boxText = document.createElement("div");boxText.id = i;boxText.style.cssText = "边框:1px 纯黑色；margin-top:8px；背景:黄色；padding:5px；";boxText.innerHTML = "InfoBox for " + cityList[i][0];var myOptions = {内容:boxText,disableAutoPan: 假,最大宽度:0,pixelOffset: 新的 google.maps.Size(-140, 0),zIndex: 空,boxStyle: {背景:网址('tipbox.gif')不重复"，不透明度:0.75，宽度:280px"},closeBoxMargin: "10px 2px 2px 2px",closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",infoBoxClearance: 新的 google.maps.Size(1, 1),isHidden: 假，窗格:浮动窗格",enableEventPropagation: 假};var ib = new InfoBox(myOptions);boxList.push(ib);google.maps.event.addListener(marker,'click',(function(marker, i) {返回函数(){boxList[i].open(map, this);}})(标记, i));google.maps.event.addDomListener(boxList[i].content_,'click',(function(marker, i) {返回函数(){警报('点击' + cityList[i][0])}})(标记, i));}//结束}//结束函数<body onload="初始化()"><div id="basic-map" data-role="page"><div data-role="header"><h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a>示例<a data-rel="back">Back</a>
<div data-role="内容"><div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"><div id="map_canvas" style="height:350px;"></div>

I want to know how to trigger an event when I click on an infoWindow using Google Maps API v3. In this example, when I click on a marker, an info window shows up with a unique message, based on which marker I clicked. I want to also be able to click the info window and have an alert show up that says

"You clicked on the infowindow for (__fill in blank location_)

I found some examples using Google Maps API v2 and jQuery, but not with just plain old Google Maps 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>

Update I ended up figuring this out for InfoBox as well, which is included below in my answer.

解决方案

Ok I figured this out for infoWindow, but then I also figured it out for InfoBox since it is prettier and more customizable. I'm new to JavaScript and these closures can be very tricky.

For 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>

For 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>

这篇关于单击 Google Map API V3 时使用 infoWindow 或 InfoBox 触发事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆