<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);
})()
2221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
