[英]bing maps add more pushpins
i want to add more pushpins in this map. 我想在此地图中添加更多图钉。 i try to just copy this part: 我尝试只复制这一部分:
longitude[1] = 41.799645 //second defined Location
latitude[1] = 20.913514
title[1] = "Kipper Market"
description[1] = "Kipper Gostivar"
but i don't see any other added pin! 但我看不到其他添加的图钉! can someone please help. 有人可以帮忙吗? *i know almost nothing about java script so please don't judge me if i didn't compose my question right. *我对Java脚本几乎一无所知,所以如果我没有正确编写问题,请不要判断我。 thanx! 感谢名单!
function GetMap() {
var longitude = new Array();
var latitude = new Array();
var title = new Array();
var description = new Array();
longitude[0] = 42.0076215 //two defined locations
latitude[0] = 20.9689308
title[0] = "Kipper Market"
description[0] = "Braka Miladinovi 178, 1200 Tetovë, Tetovo, Macedonia"
longitude[1] = 41.799645 //second defined Location
latitude[1] = 20.913514
title[1] = "Kipper Market"
description[1] = "Kipper Gostivar"
var total = 0 //number of locations
var pinInfoBox; //the pop up info box
var infoboxLayer = new Microsoft.Maps.EntityCollection();
var pinLayer = new Microsoft.Maps.EntityCollection();
var apiKey = "<api key>";
map = new Microsoft.Maps.Map(document.getElementById("map"), {credentials: apiKey});
// Create the info box for the pushpin
pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
infoboxLayer.push(pinInfobox);
for (var i = 0 ; i < 3; i++){
//add pushpins
var latLon = new Microsoft.Maps.Location(longitude[i], latitude[i]);
var pin = new Microsoft.Maps.Pushpin(latLon);
pin.Title = title[i];//usually title of the infobox
pin.Description = description[i]; //information you want to display in the infobox
pinLayer.push(pin); //add pushpin to pinLayer
Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
}
map.entities.push(pinLayer);
map.entities.push(infoboxLayer);
map.setView({zoom: 10, center: new Microsoft.Maps.Location(41.9117244, 21.0254933)});
}
function displayInfobox(e)
{
pinInfobox.setOptions({title: e.target.Title, description: e.target.Description, visible:true, offset: new Microsoft.Maps.Point(0,25)});
pinInfobox.setLocation(e.target.getLocation());
}
function hideInfobox(e)
{
pinInfobox.setOptions({ visible: false });
}
</script>
<style>
#map { position: relative; top: 0; left: 0; width: 100%; height: 800px; border:none;}
</style>
</head>
<body onload="GetMap()">
<div id="some stuff" style="width=100%; height:80px">
some text
</div>
<div id="map" style="width=100%; height:400px">
</div>
<div id="some more stuff" style="width=100%; height:80px">
some more text
</div>
</body>
</html>
The following example shows how to add multiple pushpins into Bing Maps: 以下示例显示了如何将多个图钉添加到Bing地图中:
var pinInfobox; function GetMap() { var pushpinInfos = []; pushpinInfos[0] = { 'lat': 42.0076215, 'lng': 20.9689308, 'title': 'Kipper Market', 'description': 'Braka Miladinovi 178, 1200 Tetovë, Tetovo, Macedonia' }; pushpinInfos[1] = { 'lat': 41.799645, 'lng': 20.913514, 'title': 'Kipper Market', 'description': 'Kipper Gostivar' }; var infoboxLayer = new Microsoft.Maps.EntityCollection(); var pinLayer = new Microsoft.Maps.EntityCollection(); var apiKey = "<api key>"; var map = new Microsoft.Maps.Map(document.getElementById("map"), { credentials: apiKey }); // Create the info box for the pushpin pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false }); infoboxLayer.push(pinInfobox); var locs = []; for (var i = 0 ; i < pushpinInfos.length; i++) { locs[i] = new Microsoft.Maps.Location(pushpinInfos[i].lat, pushpinInfos[i].lng); var pin = new Microsoft.Maps.Pushpin(locs[i]); pin.Title = pushpinInfos[i].title; pin.Description = pushpinInfos[i].description; pinLayer.push(pin); Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox); } map.entities.push(pinLayer); map.entities.push(infoboxLayer); var bestview = Microsoft.Maps.LocationRect.fromLocations(locs); map.setView({ center: bestview.center, zoom: 10 }); } function displayInfobox(e) { pinInfobox.setOptions({ title: e.target.Title, description: e.target.Description, visible: true, offset: new Microsoft.Maps.Point(0, 25) }); pinInfobox.setLocation(e.target.getLocation()); } function hideInfobox(e) { pinInfobox.setOptions({ visible: false }); }
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0" type="text/javascript" charset="UTF-8"></script> <body onload="GetMap();"> <div id="map" style="position: relative; width: 600px; height: 450px;"></div> </body>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.