想要使用Bing Map创建性能图。
我可以随身携带此代码,
用于创建地图,
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), { credentials: "myapikey" });
在地图上生成点的数据,
{"GetSitePerformanceByDateCountryResult":[{"AVG_UserLat":8.4827804565429688,"AVG_UserLon":76.929702758789062,"Performance":196},{"AVG_UserLat":9.44175550651162,"AVG_UserLon":76.494306583754138,"Performance":96}]}
我不知道该怎么做,请帮助。
答案 0 :(得分:1)
这很容易做到。在我提供代码之前,有一些有用的资源可以帮助您开始Bing Maps开发:
http://msdn.microsoft.com/en-us/library/gg427610.aspx
http://www.bingmapsportal.com/ISDK/AjaxV7
<!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">
var map;
var data = {"GetSitePerformanceByDateCountryResult":[{"AVG_UserLat":8.4827804565429688,"AVG_UserLon":76.929702758789062,"Performance":196},{"AVG_UserLat":9.44175550651162,"AVG_UserLon":76.494306583754138,"Performance":96}]};
function GetMap()
{
map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
credentials: "YOUR_BING_MAPS_KEY"
});
LoadData();
}
function LoadData(){
var result = data.GetSitePerformanceByDateCountryResult;
var locs = [];
for(var i=0;i<result.length;i++){
var loc = new Microsoft.Maps.Location(result[i].AVG_UserLat, result[i].AVG_UserLon);
locs.push(loc);
var pin = new Microsoft.Maps.Pushpin(loc, { text : result[i].Performance + '' });
map.entities.push(pin);
}
map.setView({bounds : Microsoft.Maps.LocationRect.fromLocations(locs), padding: 80 });
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style='position:relative;width:800px;height:600px;'></div>
</body>
</html>