<!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>
</head>
<body onload="loadAll();">
<div>根據經緯度標點</div>
<div id='mapPoint' style="position: relative; width: 400px; height: 400px;"></div>
<br/><br/>
<div>根據地址標點</div>
<div id='mapText' style="position: relative; width: 400px; height: 400px;"></div>
<br/><br/>
<div>獲取點擊經緯度</div>
<div id='mapEvent' style="position: relative; width: 400px; height: 400px;"></div>
</body>
<script type="text/javascript">
function loadAll(){
initMapPoint();
initMapText();
initMapEvent();
}
var key = "自己去申請個key";
function initMapPoint() {
var loc = new Microsoft.Maps.Location(39.9, 116.4);// 緯度 經度
var option = {
credentials : key,
center : loc,
mapTypeId : Microsoft.Maps.MapTypeId.road,
zoom : 10
};
var map = new Microsoft.Maps.Map(document.getElementById("mapPoint"), option);
var pin = new Microsoft.Maps.Pushpin(loc);
map.entities.push(pin);
//var infobox = new Microsoft.Maps.Infobox(loc, {
//title : 'Los Angeles',
//description : 'Description here',
//pushpin : pin
//});
//map.entities.push(infobox);
}
function initMapText() {
var loc = "Beijing";//詳細地址
var url = "http://dev.virtualearth.net/REST/v1/Locations?query=" + encodeURI(loc) + "&output=json&jsonp=mapTextCallback&key=" + key;
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", url);
document.body.appendChild(script);
}
function mapTextCallback(result) {
var mapText = new Microsoft.Maps.Map(document.getElementById("mapText"), {
credentials : key,
mapTypeId : Microsoft.Maps.MapTypeId.road
});
if (result && result.resourceSets && result.resourceSets.length > 0 && result.resourceSets[0].resources && result.resourceSets[0].resources.length > 0) {
var bbox = result.resourceSets[0].resources[0].bbox;
mapText.setView({
bounds : Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(bbox[0], bbox[1]), new Microsoft.Maps.Location(bbox[2], bbox[3]))
});
var location = new Microsoft.Maps.Location(result.resourceSets[0].resources[0].point.coordinates[0], result.resourceSets[0].resources[0].point.coordinates[1]);
var pin = new Microsoft.Maps.Pushpin(location);
mapText.entities.push(pin);
}
}
function initMapEvent(){
var loc = new Microsoft.Maps.Location(39.9, 116.4);
var option = {
credentials : key,
center : loc,
mapTypeId : Microsoft.Maps.MapTypeId.road,
zoom : 10
};
var map = new Microsoft.Maps.Map(document.getElementById("mapEvent"), option);
Microsoft.Maps.Events.addHandler(map, 'click', function(e){
if (e.targetType == "map") {
var point = new Microsoft.Maps.Point(e.getX(), e.getY());
var loc = e.target.tryPixelToLocation(point);
var pin = new Microsoft.Maps.Pushpin(loc);
map.entities.push(pin);
alert(loc.latitude + ":" + loc.longitude );
}
});
}
</script>
</html>
bing 地圖api使用
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章