经过了几天的挣扎,我终于无奈的从GMAP.NET的开发套件逃跑出来,虽然GMAP.NET开源,但是我怀疑他是不是很久不跟新了,给的DEMO都已经无法使用,无奈中我又想重回HTML+javascript的方案中,记得那天老师和我推荐用百度的地图,昨天看了下感觉很多的API都非常合用哦,果断弃暗投明了,Google拜拜。
今天大骂光秀是酱油帝,骂完之后没有明显变化,借了几本关于HTML和CSS的书又给他看,估计两天内不会有什么本质上的变化,只是害怕到时候写出来他连HTML都看不懂,关键时候自己还是最可信,果断单干之。
百度地图的API相当好懂,又有大量的demo源码可供选择,基本上没有什么压力,只是之前我也是刚刚接触javascript基本上的东西无法盲打,所以还要经常查书,国内的书基本上会讲很多种方法但是又很烦人,设计那么多方法还不是只用一种,有时候会想念c语言的简单来着。
今天的完成的有加载地图,实现地图上动态的Marker,以及在Marker上画个圈权当是wifi的影响区域了,那个图标一跳一跳的完全满足某老师对美感的追求。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#map {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=104bab63a5987e0d594b5967a3fa4510">
</script>
<title>HoHoMap</title>
</head>
<body>
<div id="l-map"></div>
<div id="r-result">
<input type="button" onClick="marker.show()" value="显示"/>
<input type="button" onClick="marker.hide()" value="隐藏"/>
</div>
</body>
</html>
<script type="text/javascript" src="Ini.js">
</script>
<script type="text/javascript" >
InitMap();
</script>
这里是地图的设置来着,其实只是 百度上的代码复制粘贴。
var map = new BMap.Map("l-map"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.4035,39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom(); //启用滚轮放大缩小
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableAutoResize();
map.addEventListener("click", function(e){
var marker1 = new BMap.Marker(e.point); // 创建标注
map.addOverlay(marker1); // 将标注添加到地图中
marker1.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画});
//marker1.addEventListener("click",function(){marker1.hide();circle.hide();});
//添加圆圈
var circle = new BMap.Circle(e.point,500);
map.addOverlay(circle);
});