如何使用 Google Maps 3 API 关闭信息窗口?

发布于 2024-09-01 06:30:08 字数 1670 浏览 4 评论 0原文

我看过其他帖子,但他们没有像我的那样动态循环标记。如何使用以下代码创建一个事件,当单击另一个标记时该事件将关闭信息窗口?

$(function(){
    var latlng = new google.maps.LatLng(45.522015,-122.683811);
    var settings = {
        zoom: 10,
        center: latlng,
        disableDefaultUI:false,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

    $.getJSON('api',function(json){
        for (var property in json) {
            if (json.hasOwnProperty(property)) {
                var json_data = json[property];
                var the_marker = new google.maps.Marker({
                    title:json_data.item.headline,
                    map:map,
                    clickable:true,
                    position:new google.maps.LatLng(
                        parseFloat(json_data.item.geoarray[0].latitude),
                        parseFloat(json_data.item.geoarray[0].longitude)
                    )
                });
                function buildHandler(map, marker, content) {
                    return function() {
                        var infowindow = new google.maps.InfoWindow({
                            content: '<div class="marker"><h1>'+content.headline+'</h1><p>'+content.full_content+'</p></div>'
                        });
                        infowindow.open(map, marker);
                    };
                }
                new google.maps.event.addListener(the_marker, 'click',buildHandler(map, the_marker, {'headline':json_data.item.headline,'full_content':json_data.item.full_content}));
            }
        }
    });
});

I've seen the other posts, but they dont have the markers being looped through dynamically like mine. How do I create an event that will close the infowindow when another marker is clicked on using the following code?

$(function(){
    var latlng = new google.maps.LatLng(45.522015,-122.683811);
    var settings = {
        zoom: 10,
        center: latlng,
        disableDefaultUI:false,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

    $.getJSON('api',function(json){
        for (var property in json) {
            if (json.hasOwnProperty(property)) {
                var json_data = json[property];
                var the_marker = new google.maps.Marker({
                    title:json_data.item.headline,
                    map:map,
                    clickable:true,
                    position:new google.maps.LatLng(
                        parseFloat(json_data.item.geoarray[0].latitude),
                        parseFloat(json_data.item.geoarray[0].longitude)
                    )
                });
                function buildHandler(map, marker, content) {
                    return function() {
                        var infowindow = new google.maps.InfoWindow({
                            content: '<div class="marker"><h1>'+content.headline+'</h1><p>'+content.full_content+'</p></div>'
                        });
                        infowindow.open(map, marker);
                    };
                }
                new google.maps.event.addListener(the_marker, 'click',buildHandler(map, the_marker, {'headline':json_data.item.headline,'full_content':json_data.item.full_content}));
            }
        }
    });
});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

等待圉鍢 2024-09-08 06:30:08

我终于弄清楚了...不感谢这里的任何人...实际上相当简单:

首先,设置一些变量来存储信息窗口:

var infowindow;

然后将其添加到触发其他 infowindow.open( 的 onClick 函数所在的位置) )。不过,请将其放在打开的上方:

if(infowindow) {infowindow.close()}

在循环内或以其他方式添加标记。

例如完整动作:

在我的脚本的最顶部:

var infowindow;

在添加标记的循环内:

function buildHandler(map, marker, content) {
    return function() {
        if(infowindow) {infowindow.close()}
        infowindow = new google.maps.InfoWindow({
            content: 'My Content here'
        });
        infowindow.open(map, marker);
    };
}

I finally figured it out... no thanks to anyone here... It was actually fairly easy:

First, set up some vars to store the infowindow:

var infowindow;

Then add this to wherever your onClick function is that triggers the other infowindow.open(). Put it above the open though:

if(infowindow) {infowindow.close()}

Inside your loop or however else you are adding markers.

E.g. in full action:

At the very top of my script:

var infowindow;

Inside my loop of adding markers:

function buildHandler(map, marker, content) {
    return function() {
        if(infowindow) {infowindow.close()}
        infowindow = new google.maps.InfoWindow({
            content: 'My Content here'
        });
        infowindow.open(map, marker);
    };
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文