百度地图Api进阶教程-实例高级操作8.html

最新推荐文章于 2018-01-31 16:28:38 发布

过天

最新推荐文章于 2018-01-31 16:28:38 发布

阅读量3.4k

点赞数

分类专栏：百度地图Api教程文章标签： api API APi 地图百度

本文链接：https://blog.csdn.net/sd0902/article/details/8478442

版权

百度地图Api教程专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度地图</title>

 <script type=text/javascript src=http://fw.qq.com/ipaddress></script> 
<script type="text/javascript">
	var iscreatr=false; //是否创建
	var map;  // 百度地图
	var marker;  // 标注
	var markX; // 标注x
	var markY; // 标注y
	
	//加载完地图回调
	function initialize() {
		//---------------------------------------------基础示例---------------------------------------------
		map = new BMap.Map("allmap",{minZoom:12,maxZoom:20});            // 创建Map实例
		//map.centerAndZoom(new BMap.Point(116.4035,39.915),15);  //初始化时，即可设置中心点和地图缩放级别。
		map.centerAndZoom("成都",13);                     // 初始化地图,设置中心点坐标和地图级别。
		map.enableScrollWheelZoom(true);//鼠标滑动轮子可以滚动


		map.addEventListener("click", function(e){
			if(iscreatr==true)return;
			//---------------------------------------------创建标注---------------------------------------------
			iscreatr=true;
			markX=e.point.lng;
			markY=e.point.lat;
			 var point = new BMap.Point(e.point.lng ,e.point.lat);//默认
			 // 创建标注对象并添加到地图  
			 marker = new BMap.Marker(point);  
			 var label = new BMap.Label("我是可以拖动的，右键取消的",{offset:new BMap.Size(20,-10)});
			 marker.setLabel(label)
			 map.addOverlay(marker);  
			 marker.enableDragging();    //可拖拽
			 marker.addEventListener("dragend", function(e){   //标注拖动事件
					markX=e.point.lng;
					markY=e.point.lat;
					document.getElementById("r-result").innerHTML = e.point.lng + ", " + e.point.lat;//打印拖动结束坐标
			 });
		});

		//---------------------------------------------鼠标右键取消标注操作---------------------------------------------
		var menu = new BMap.ContextMenu(); //右键菜单
		var txtMenuItem = [  //右键菜单项目
			{
				text:'取消',
				callback:function(){
					map.removeOverlay(marker);
					iscreatr=false;
					
				}
			}
		];


		for(var i=0; i < txtMenuItem.length; i++){
			menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100)); //菜单添加项目
		}
		 
		map.addContextMenu(menu);

	}
	
	function loadScript() {
	   var script = document.createElement("script");
	   script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize";
	   document.body.appendChild(script);
	}
 
	window.onload = loadScript;
	
	//-------------------------------------
	//切换地图
	function changeType(value){
		map.setCenter(value);
	}
	
	//提交
	function submit(){
		if(iscreatr==true)
		{
			alert(markX+":"+markY);
		}
	}
</script>


</head>
 <body>
	<div id="r-result" style="float:left;width:100px;">打印坐标</div>
	<div id="allmap" style="float:left;width: 800px; height: 500px"></div>
	<div id="r-result" style="float:left;width:100px;">
		<input type="button" οnclick="submit()" value="提交" /></br>

		切换城市：<select οnchange="changeType(this.value)" >
			<option value ="北京">北京</option>
			<option value ="广州">广州</option>
			<option value="成都">成都</option>
		</select>
	</div>
</body>

<script type="text/javascript">
	// 移动到某点 map.panTo(new BMap.Point(116.409, 39.918));  
	// 移动到某城市	map.setCenter("广州");   //两秒后移动到广州

	 // map.setZoom(14);   //放到到14级
</script>

点击地图创建标记自由拖动右键取消点击提交返回当前经纬度