Nesse post eu vou mostrar um pouco de como usar o Bing Maps Ajax v7, esse e o primeiro de uma serie de post que eu irei exibir nesse espaço, falando sobre essa versão do bing maps.
Mapa Básico
Exibindo o mapa básico, que inclui todas as funcionalidades de navegação, composto das seguintes etapas:
1. No topo da página HTML adicione a seguinte declaração DOCTYPE.
<DOCTYPE html PUBLIC! "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. Na tagHeadda página HTML, adicione um elemento META com o atributo definido como charset "utf-8", como no exemplo.
<CODE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</CODE>
Obs:É recomendável que você use UTF-8 em sua página web.
3. Também na tag Head, adicione uma referência para o controle do mapa.
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
</ Script>
4. Na tag Body, adicione um elemento DIV para colocar o mapa. O tamanho do mapa é definido por width e height do elemento DIV. A posição no mapa é definida usando as propriedades position, top, e left. Você pode ajustar esses valores.
<div id='mapDiv' style="position:absolute; width:400px; height:400px;"></ div>
ou
. Mapa {
position: absolute;
top: 20;
left: 10;
width: 400px;
height: 400px;
border: # 555555 2px solid;
}
...
<div id="mapDiv" class="map"></ div>
Se você não especificar uma largura ou altura, a largura e altura da div será usada como referencia. Para compatibilidade cross-browser, você sempre deve especificar o atributo position (tanto absoluteou relative são valores válidos).
5. Finalmente, vamos criar uma nova instância da classe mapa. Você também precisa incluir uma opção no mapa para conter as suas credenciais, que é o Bing Maps Key, que você pode criar a partir do Bing Maps Portal (https://www.bingmapsportal.com/ ).
var map = new Microsoft.Maps.Map (document.getElementById ("mapDiv"), {credenciais: "Bing Maps chave"});
Se tudo der certo o código vai ficar assim.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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">
function GetMap()
{
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{credentials: "Your Bing Maps Key",
center: new Microsoft.Maps.Location(-22.00, -43.00),
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 7});
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
.jpg)
