Bing térkép elérése : https://www.bing.com/
A szabály itt is azonos a header részben be kell tölteni az js és css könyvtárakat. A web lap betöltési eseményéhez kötve indítani kell a térkép réteg aktiválását. Induló pozíciót és a nagyítás mértékét meg kell adni. A képernyő pont pozicióját attributumait és esemény kezelőjét be kell állítani. És már működik is.
Megjegyzés ként itt egy 'credentials' kulcsot is meg kell adni. Ezt fejlesztői adminisztráció után lehet kérni.
Minta:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MIE Bing térkép minta 2 </title>
<!-- Call to Bing Maps API -->
<script type="text/javascript"
src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
var pinInfobox;
function Init()
{
map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
credentials: "xxxx" //kl DEV/okt
});
var loc = new Microsoft.Maps.Location(47.4274747,19.2058965);
var pin = new Microsoft.Maps.Pushpin(loc);
pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(),
{title: 'MIE',
description: 'Itt vagyok',
visible: false,
offset: new Microsoft.Maps.Point(0,15)});
///
Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
///
Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox);
///
map.entities.push(pin);
map.entities.push(pinInfobox);
///
map.setView({center: loc, zoom: 13});
}
///
function displayInfobox(e)
{
pinInfobox.setOptions({ visible:true });
}
///
function hideInfobox(e)
{
pinInfobox.setOptions({ visible: false });
}
</script>
<style>
html, body, #myMap { height: 100%; margin: 0; }
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body onload="Init();" >
<div id='myMap' s></div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MIE Bing térkép minta 2 </title>
<!-- Call to Bing Maps API -->
<script type="text/javascript"
src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
var pinInfobox;
function Init()
{
map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
credentials: "xxxx" //kl DEV/okt
});
var loc = new Microsoft.Maps.Location(47.4274747,19.2058965);
var pin = new Microsoft.Maps.Pushpin(loc);
pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(),
{title: 'MIE',
description: 'Itt vagyok',
visible: false,
offset: new Microsoft.Maps.Point(0,15)});
///
Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
///
Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox);
///
map.entities.push(pin);
map.entities.push(pinInfobox);
///
map.setView({center: loc, zoom: 13});
}
///
function displayInfobox(e)
{
pinInfobox.setOptions({ visible:true });
}
///
function hideInfobox(e)
{
pinInfobox.setOptions({ visible: false });
}
</script>
<style>
html, body, #myMap { height: 100%; margin: 0; }
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body onload="Init();" >
<div id='myMap' s></div>
</body>
</html>
Linkek:
https://mierdekel.hu/bing/index_bm2.html
Nincsenek megjegyzések:
Megjegyzés küldése
Megjegyzés: Megjegyzéseket csak a blog tagjai írhatnak a blogba.