高德map api用例 -

virusfu

浏览: 183077 次
性别:
来自: 北京

最近访客更多访客>>

qisblxy

厚厚baby

evans1998

notrace

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

高德map api用例

可实现右键点位

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Hello, world</title>  
<style type="text/css">  
    html { height:100% }  
    body { height:100%; margin:0px; padding:0px }  
    #container { height:90%;width:90%; padding-left:10px }  
</style>  
<script type="text/javascript"  src="http://api.amap.com/webapi/init?v=1.1">  </script>     
<script type="text/javascript">  
	var $ = function(id){
			return document.getElementById(id);
		}
	var decode = function(lnglat){
			if (lnglat.indexOf(',') == -1)
			{
				alert("经纬度格式错误");
				 return {  
					lng: 0 ,
					lat: 0
				}   
			}else{	
				var s = lnglat.split(',');
				 return {  
					lng: s[0],  
					lat: s[1]  
				}   
			}
		}
    function lnglatQuery() {  
		$("container").innerText = "";
		var lnglat = $("lnglat").value.trim();
		var lng = decode(lnglat).lng;
		var lat = decode(lnglat).lat;
		
		var mapObj = new AMap.Map("container"); // 创建地图实例  
		mapObj.plugin(["AMap.ToolBar","AMap.OverView,AMap.Scale"], function() {  
		  // 加载工具条  
			tool = new AMap.ToolBar({        
				direction: true, // 隐藏方向导航  
				ruler: false, // 隐藏视野级别控制尺  
				autoPosition: false // 禁止自动定位  
			});  
			mapObj.addControl(tool);      
		});
		 
		var marker = new AMap.Marker({  
			id:"m",  
			position: new AMap.LngLat(lng,lat),  
			offset: new AMap.Pixel(0,0),  
			icon: "http://api.amap.com/webapi/static/Images/marker_sprite.png"  
		});

		//设置可以拖拽
		marker.setDraggable(true);
		//绑定marker拖拽事件
		mapObj.bind(marker,"dragend",function(e){
			 $("lnglat").value = e.lnglat; 
		});
		

		mapObj.addOverlays(marker ); 
		 mapObj.bind(mapObj,"rightclick",function(e){
			var lnglat = e.lnglat;
			marker.setPosition(lnglat);
			$("lnglat").value = lnglat; 
		}); 
		// 自定义构造AMap.Marker对象   
       var point = new AMap.LngLat(lng,lat); // 创建点坐标  
       mapObj.setCenter(point); // 设置地图中心点坐标  
	  
    } 
	var geocoderOption = {  
		range:300, // 范围  
		crossnum:2, // 道路交叉口数  
		roadnum :3, // 路线记录数  
		poinum:1 // POI点数  
   };  
	var geocoder = new AMap.Geocoder(geocoderOption);  
	function mechantQuery(){
		var address = $('uname').value;
		 geocoder.geocode(address,function(data){  
			 var lng = data.list[0].x;
			 var lat = data.list[0].y; 
			 $("lnglat").value = lng+"," + lat; 
			 lnglatQuery();
		}); 
	}
 
</script>  
</head>    
  
<body>  
	<p>
		商户名称:<input type="text" name="uname" id="uname" value="北京中关村" size="40" /> <input type="button" name="btn_uname" value="查询" onclick="mechantQuery()"/>
		经纬度:<input type="text" name="lnglat" id="lnglat" value="116.404, 39.915" size="40" /> <input type="button" name="btn_lat_lng" value="查询" onclick="lnglatQuery()" />
	</p>
    <div id="container"></div>   
</body>  
</html>

分享到：