在GMaps API V3中显示地图版权

时间:2011-03-30 17:24:35

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

我目前正在将应用程序从GMaps V2迁移到V3。当我使用OSM和其他非Google地图图层时,我希望将版权声明保留在右下方。但reference documentation没有给出任何暗示。在V2中,版权甚至有自己的类GCopyrightCollection,并被传递给GTileLayer。 Google Code游戏也没有提供V3的示例。

有没有人知道如何在新API中执行此操作?

2 个答案:

答案 0 :(得分:8)

邮件列表帮助我解决了这个问题(参见thread)。有sample code on Google Code for copyright collections以及如何在地图DIV的右下角显示它们。

由于在右下角布局自定义DIV存在问题(拖动地图时仅跳转到正确位置,GMaps API本身存在问题),我现在将其显示在左下角。 更新:问题似乎在API中得到解决!)

以下代码按预期工作(当然我没有使用全局变量,为了清楚起见,删除了this.):

copyrightDiv = document.createElement("div")
copyrightDiv.id = "map-copyright"
copyrightDiv.style.fontSize = "11px"
copyrightDiv.style.fontFamily = "Arial, sans-serif"
copyrightDiv.style.margin = "0 2px 2px 0"
copyrightDiv.style.whiteSpace = "nowrap"
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(copyrightDiv)

copyrights = {}
copyrights["OSM"] = "<a target=\"_blank\" href=\"http://www.openstreetmap.org/\">OpenStreetMap</a>"
copyrights["Osmarender"] = copyrights["OSM"]
copyrights["Cloudmade"] = "<a target=\"_blank\" href=\"http://cloudmade.com/\">CloudMade</a> - Map data <a target=\"_blank\" href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CCBYSA</a>"
copyrights["Cloudmade-Fine"] = copyrights["Cloudmade"]

function onMapTypeIdChanged()
{
    newMapType = map.getMapTypeId()

    copyrightDiv = document.getElementById("map-copyright")
    if(newMapType in copyrights)
        copyrightDiv.innerHTML = copyrights[newMapType]
    else
        copyrightDiv.innerHTML = ""
}

google.maps.event.addListener(map, "maptypeid_changed", onMapTypeIdChanged)

// Call once so that the correct copyright notice is set for
// the initially selected map type
setTimeout(onMapTypeIdChanged, 50)

答案 1 :(得分:2)

AndiDog的解决方案给我带来了很大的启发。但是有一些不利之处 - 以这种方式构建的版权没有标准谷歌版权那么好的半透明度。自己构建它以支持所有浏览器等会很烦人。因此我使用不同的策略 - 在DOM中找到文本“使用条款”并将您的版权文本放在它之前,进入由谷歌创建的div。此外,我将功能增强为允许自定义徽标,如my question here中所示:

function gmaps3_copyright(map, copyrights, logos)
{
        var copyrightDiv, logoDiv;
        var google_div__span_created = 0;

        logoDiv = document.createElement("div");
        logoDiv.index = 0; // used for ordering 
        map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(logoDiv);

        function onMapTypeIdChanged()
        {
                newMapType = map.getMapTypeId()

                if (!google_div__span_created) { // hack into google's div - prefered solution
                        copyrightDiv = document.createElement("span");
                        $(copyrightDiv).insertBefore(
                                $('#mainMap :contains("Terms of Use")')
                                .filter(function() { return $(this).children().length < 1 })
                        );
                        google_div__span_created = 1;
                }

                if (newMapType in copyrights)
                        copyrightDiv.innerHTML = copyrights[newMapType] + ' - '
                else
                        copyrightDiv.innerHTML = ""

                if (newMapType in logos)
                        logoDiv.innerHTML = logos[newMapType]
                else
                        logoDiv.innerHTML = ""

        }

        google.maps.event.addListener(map, "maptypeid_changed", onMapTypeIdChanged);

        // Call once so that the correct copyright notice is set for
        // the initially selected map type
        // but wait until the complete html markup is loaded
        google.maps.event.addListener(map, 'tilesloaded', function () {
                setTimeout(onMapTypeIdChanged, 50);
                // still add some timeout to be 100% sure
        })
}

就这样称呼它:

gmaps3_copyright(map,
    {
        'OSM': '&copy; <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>',
         'Cloudmade' : "<a target=\"_blank\" href=\"http://cloudmade.com/\">CloudMade</a> - Map data <a target=\"_blank\" href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CCBYSA</a>"
    },
    {
         'OSM': // logo html code here
    }
)

您可能需要修改“使用条款”字符串以进行本地化。