<html>
<head>
<meta charset="utf-8" />
<title>百度地圖顯示地圖信息</title>
//引用百度API 你要有百度賬號獲得JavaScript API
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= 你的百度密鑰"></script>
<style type="text/css">
*{
margin: 0;padding: 0;
}
html,body,#map{
width: 100%;height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
<script type="text/javascript" src="js/new_file-a.js"></script>
</html>
js代碼
(function(){
//地圖界面的顯示
var opt = {mapType:BMAP_HYBRID_MAP,minZoom:2}
var map = new BMap.Map("map",opt);
var center = new BMap.Point(116.519072,39.931867);
map.centerAndZoom(center,13);
//====以上是把地圖顯示在頁面的上的方法=============
//========相關事件操作=======================
//鼠標滑輪滑動 放大縮小地圖
map.enableScrollWheelZoom();
//禁止拖拽地圖
map.disableDragging();
function Wuhan(){
//把這個控件放在左上角
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
//距離左上角的位置
this.defaultOffset = new BMap.Size(50,50);
};
//把這個控件定義爲基類控件的子類
Wuhan.prototype = new BMap.Control();
Wuhan.prototype.initialize=function(map){
//創建一個div 設置樣式
var wh = document.createElement("div");
wh.style.height="120px";
wh.style.width="100px";
wh.style.color="red";
wh.style.backgroundColor="greenyellow";
//把創建的div放在地圖上面
map.getContainer().appendChild(wh);
//設置定時器
var time=setInterval(function(){
//找到定位 信息
location.location();
var city = location.getAddressComponent();
//判斷 獲取到位置信息時 定時器停止
if(city!=null){
clearInterval(time)
}
console.log(city)
// 利用for in 遍歷 因爲得到的數據是鍵值對的數組 取出屬性值 放到下面的p標籤中
for(key in city){
var cc = document.createElement("p");
cc.innerHTML=city[key];
wh.appendChild(cc)
};
},1000)
// 記得打印
return wh;
};
var qq = new Wuhan()
map.addControl(qq);
})()
