【问题标题】:Showing info window outside the google map在谷歌地图外显示信息窗口
【发布时间】:2013-05-22 06:47:21
【问题描述】:

我已经使用邮政编码多边形实现了谷歌地图,即我正在使用不同的邮政编码坐标在地图上绘制某些邮政编码多边形。在邮政编码多边形上,我展示了市场标记。当我单击邮政编码多边形或市场标记时,它会显示一个包含相应数据的信息窗口。但此窗口在地图内打开,指向相应的邮政编码/市场标记。现在我有一个要求,无论邮政编码/标记如何,我都必须在地图外显示信息窗口。就像我会在地图外保留某个固定区域(可能是 div),当我单击任何邮政编码多边形时,信息窗口将显示在该固定区域内。我们该怎么做呢。

我的工作代码

var path = [
                {% for polycoord in zip.zip_info.zip_polygon %}
                    new google.maps.LatLng({{polycoord.1}}, {{polycoord.0}}),
                {% endfor %}
            ];



var polygon = new google.maps.Polygon(
    {
        path:path, 
        clickable:true,
        strokeColor: '#000000',
        strokeOpacity: 0.75,
        strokeWeight: 1,
        fillColor: '#333fff',
        fillOpacity: 1,
    }

);



google.maps.event.addListener(polygon, 'click', function (event) {
            $.ajax({  
                type: "GET",  
                url: GET_DATA,  
                data: dataString, 
                success: function(res) { 
                    if(res != '') {
                        var contentString = res;
                        var infoWindow = new google.maps.InfoWindow(
                                        { content: contentString });    
                        infoWindow.setPosition(event.latLng);
                        infoWindow.open(map);
                        google.maps.event.addListener(map, 'click', function() {
                            infoWindow.close();
                        });
                    } else {
                        alert('No data found')
                    }
                }  
            });
    });

【问题讨论】:

  • 可以获取值并将其插入到另一个 div 中。您能否发布您的代码以便我更好地查看。
  • 嗨,harikrish,我已经添加了我的工作代码。当我点击任何邮政编码区域时使用此代码,它会在地图内显示信息窗口。
  • 类似this? (在地图外的 div 中显示点击的国家...)

标签: google-maps google-maps-api-3 maps


【解决方案1】:

应该可以工作(如果您现有的代码可以),但未经测试。

google.maps.event.addListener(polygon, 'click', function (event) {
        $.ajax({  
            type: "GET",  
            url: GET_DATA,  
            data: dataString, 
            success: function(res) { 
                if(res != '') {
                    var contentString = res;
                    document.getElementById('theIdOfYourDiv').innerHTML = res;
                } else {
                    alert('No data found')
                }
            }  
        });
});

【讨论】:

    猜你喜欢
    • 2016-12-21
    • 2012-02-18
    • 1970-01-01
    • 2014-07-21
    • 1970-01-01
    • 2013-06-08
    • 2013-09-13
    • 2012-03-28
    • 2013-01-07
    相关资源
    最近更新 更多