现在的位置: 首页 > 综合 > 正文

HoHoMap开发日记(2)

2013年08月08日 ⁄ 综合 ⁄ 共 2118字 ⁄ 字号 评论关闭


HoHoMap开发日记(2)


    经过了几天的挣扎,我终于无奈的从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>


其实我发觉CSS的东西也成问题,想要交给光秀来做的,一副酱油的表情让我完全无法信任。最后的是加载javascript的函数来着,提供了初始化的代码。


这里是地图的设置来着,其实只是 百度上的代码复制粘贴。

	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();


在地图上添加上一个Marker,然后再点击的时候取消显示,以及在Marker周围放上一个圈,表示信号的范围。

	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);
		});


明天准备实现Marker的移动来着。

抱歉!评论已关闭.