HoHoMap开发日记（3）

最新推荐文章于 2013-06-07 00:23:59 发布

织田信长

最新推荐文章于 2013-06-07 00:23:59 发布

阅读量561

点赞数

分类专栏： BaiduAPI JavaScript HTML

本文链接：https://blog.csdn.net/Arthurlr/article/details/8844653

版权

JavaScript 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

BaiduAPI

4 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

HoHoMap开发日记（3）

继续吐槽队友，他们在玩三国杀……

而我在苦逼的听话写东西……

好了，一直搞不懂JavaScript的参数传入，想要连一个监听器，然后又不想用匿名方法，你要我如何是好呀，所以写成了这样的代码。

	map.addEventListener("click",function(e)
	{
		addMarker(e,map);		
	});

function addMarker(e,map)
{
	var icon=new BMap.Icon("loc_1.png",new BMap.Size(32,32),{anchor:new BMap.Size(16,32)});
	var marker=new BMap.Marker(e.point,{icon:icon});
	//var map = new BMap.Map("l-map");  
	marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画});	
	map.addOverlay(marker);  
}

其实我是想直接调用的，但是不知为什么就是不行哦……

给地图添加测距功能哦，没有什么技术含量，只是调用百度的javascript库。

     <script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>

在HTML文件中调用了这个库之后，在右键菜单的回调函数中调用开启功能

function InitRightClick(map)
{
	var contextMenu = new BMap.ContextMenu();
	var txtMenuItem = [
	  {
	   text:'放大',
	   callback:function(){map.zoomIn()}
	  },
	  {
	   text:'缩小',
	   callback:function(){map.zoomOut()}
	  },
	  {
		 text:'打开测距模式',
		 callback:function()
		 {
			DistanceMode = new BMapLib.DistanceTool(map);
			DistanceMode.open();
			  
		 }
	  },
	  {
	  	 text:'关闭测距模式',
		 callback:function()
		 {
			//var myDis = new BMapLib.DistanceTool(map);
			DistanceMode.close();  //关闭鼠标测距大
			  
		 }
	  }
	  
	 ];
	
	 for(var i=0; i < txtMenuItem.length; i++)
	 {
		contextMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
		if(i==1 || i==3) 
		{
		  contextMenu.addSeparator();
		}
	 }
	 map.addContextMenu(contextMenu);	
}

下面做一个右键弹出菜单

这个是布局的文件

    	<form>
            	<label for="Marker">Marker：</label>            
            	<select name="SelectMarker" id="SelectMarker">
                    <option value=0 selected>什么都没有</option>
                    <option value=1>默认图标</option>
                    <option value=2>公仔</option>
                    <option value=3>车子</option>
                    <option value=4>基站</option>
                    <option value=5>交通灯</option>
                </select>           
   	 </form>

这个是实现的代码

function addMarker(e,map)
{
	var thisValue=document.getElementById("SelectMarker").value;
	//alert(thisValue);
	if(thisValue==0)
	{
	}
	else if(thisValue==1)
	{
		var marker=new BMap.Marker(e.point);
		map.addOverlay(marker);
	}
	else if(thisValue==2)
	{
		var icon=new BMap.Icon("man.png",new BMap.Size(24,24),{anchor:new BMap.Size(12,24)});
		var marker=new BMap.Marker(e.point,{icon:icon});
		map.addOverlay(marker);
	}
	else if(thisValue==3)
	{
		var icon=new BMap.Icon("car.png",new BMap.Size(24,24),{anchor:new BMap.Size(12,24)});
		var marker=new BMap.Marker(e.point,{icon:icon});
		map.addOverlay(marker);
	}
	else if(thisValue==4)
	{
		var icon=new BMap.Icon("wifi.png",new BMap.Size(24,24),{anchor:new BMap.Size(12,24)});
		var marker=new BMap.Marker(e.point,{icon:icon});
		map.addOverlay(marker);
	}
	else if(thisValue==5)
	{
		var icon=new BMap.Icon("traffic_red.png",new BMap.Size(24,24),{anchor:new BMap.Size(12,24)});
		var marker=new BMap.Marker(e.point,{icon:icon});
		map.addOverlay(marker);
	}
}