如何在Bing Map的角落显示文字?

时间:2015-10-26 13:44:54

标签: javascript css bing-maps

我正在尝试在右侧角落的bing地图上显示文字。

如果它具有响应能力会很棒。如果尺寸更改,则仍需要在角落中显示该文本。

我正在使用Javascript Bing API v = 7

1 个答案:

答案 0 :(得分:1)

这样做的简单方法是将文本浮动到地图上方。这只是简单的HTML / CSS。这是一个例子:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

  <script type="text/javascript">
    var map;

    function GetMap()
    {   
        map = new Microsoft.Maps.Map(document.getElementById("myMap"), { 
            credentials: "YOUR_BING_MAPS_KEY"
        });
    }
    </script>
    <style>
    html, body{
        width:100%;
        height:100%;
        padding:0;
        margin:0;
    }

    .mapStyle{
        position:relative;
        width:100%;
        height:100%;
    }

    .myTextOverlay{
        position:absolute;
        bottom: 40px;
        right:10px;
    }
    </style>
</head>
<body onload="GetMap();">
    <div class="mapStyle">
        <div id='myMap' class="mapStyle"></div>
        <div class="myTextOverlay">My custom Text</div>
    </div>
</body>
</html>