百度地圖API調用實例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
<title>百度地圖API調用示例</title>
<style>
   .iwTitle{
     color:#CC5522;
     font-size:14px;
     white-space:nowrap;
}
body{font-size:12px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
<p>
 sssssssfdfgdfsgdfshdsghgsdfhfsghfsghdfghgfd
</body>
</html>
<script type="text/javascript">
 var map = new BMap.Map("container");
 var piont = new BMap.Point(113.88582,22.555523);
 var marker = new BMap.Marker(piont);
 var opts={
    width:200,    //信息窗口寬度
    height:80,    //信息窗口高度
    title:"<span class='iwTitle'>農夫it站-百度地圖API調用示例</span>",//信息窗口標題
}
map.addControl(new BMap.NavigationControl());
map.centerAndZoom(piont,15);
map.addOverlay(marker);


var infoWindow = new BMap.InfoWindow("地址:海秀路2021北門<br/>網址:http://www.nongfuit.com",opts);//創建信息窗口對象
map.openInfoWindow(infoWindow,map.getCenter());    //打開信息窗口

</script>


效果如下圖所示

發佈了19 篇原創文章 · 獲贊 6 · 訪問量 6萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章