天天看點

高德地圖常用方法

地圖初始化:

//地圖初始化
var opt = {
	level:11, //設定地圖縮放級别
	center:new AMap.LngLat(117.289686, 31.867204), //設定地圖中心點
	doubleClickZoom:true, //輕按兩下放大地圖
	scrollWheel:false//滑鼠滾輪縮放地圖
}
var map = new AMap.Map("container",opt);
map.plugin(["AMap.ToolBar","AMap.OverView","AMap.Scale"],function(){
	var toolbar = new AMap.ToolBar();
	toolbar.autoPosition=false; //加載工具條
	map.addControl(toolbar);
	var overview = new AMap.OverView(); //加載鷹眼
	map.addControl(overview);
	var scale = new AMap.Scale(); //加載比例尺
	map.addControl(scale);
});      

添加覆寫物:

//添加覆寫物
function addMapCover(obj){
	var geocoderOption = {
		range:400, // 範圍
		crossnum:1, // 道路交叉口數
		roadnum :1, // 路線記錄數
		poinum:1 // POI點數
	};
	var gc=new AMap.Geocoder(geocoderOption);
	var mypoint=new AMap.LngLat(obj.longitude_point, obj.dimensionality_point);
	var direc=obj.direction;
	var iconImg ="../images/mapicon/currcar_0.gif";
	
	//添加相應的覆寫物
	if(!obj.count||obj.count==0) {
		//自定義覆寫物dom 元素
		var m = document.createElement("div");
		m.className = "markerlabel";
		var markeruri= document.createElement("img");
		markeruri.className="markerlnglat";
		markeruri.src=iconImg;
		m.appendChild(markeruri);
		var n = document.createElement("span");
		n.innerHTML = " "+obj.car_num;
		m.appendChild(n);
		var marker = new AMap.Marker({
			map:map,
			position:mypoint, //基點位置
			offset:new AMap.Pixel(0,0), //相對于基點的偏移位置
			content:m //自定義覆寫物内容
		});
		covers.push(marker);
		//添加監聽
		AMap.event.addListener(marker,'click',function(e){
			//擷取位址資訊
			gc.regeocode(mypoint, function(rs){
				showLocationInfo(obj,rs);
			});
		});
	}else if(obj.count&&obj.count>0) {// 如果子節點存在且數量大于1的顯示數字
		//自定義覆寫物dom 元素
		var m = document.createElement("div");
		m.className = "bubbleimg";
		var n = document.createElement("span");
		n.innerHTML = "<b><a style='text-decoration: none' href='javascript:void(0)'>"+(obj.count+1)+"</a></b>";
		m.appendChild(n);
		var marker = new AMap.Marker({
			map:map,
			position:mypoint, //基點位置
			offset:new AMap.Pixel(0,0), //相對于基點的偏移位置
			content:m //自定義覆寫物内容
		});
		covers.push(marker);
		var cids = obj.childrenIds;
		var cidstr="(,"+cids+",)";
		//添加監聽
		AMap.event.addListener(marker,'click',function(e){
			showCarListBubble(cidstr);
		});
	}
}      

 顯示視窗:

//顯示位址資訊視窗
function showLocationInfo(obj,marker,rs){
	var content='';
	//擷取地理位置
	var locAddress="未知";
	if (rs.status == "E0") {
		var province, city, district, road;
		province = rs.list[0].province.name;
		if (province == "北京市") {
			city = province;
		}
		else {
			city = rs.list[0].city.name;
		}
		district = rs.list[0].district.name;
		road="";
		if(typeof(rs.list[0].roadlist[0])!="undefined"){
			road = rs.list[0].roadlist[0].name;
		}
		var address="";
		if(typeof(rs.list[0].poilist[0])!="undefined"){
			address = rs.list[0].poilist[0].address;
		}
		if(address==""){
			locAddress = province + city + district + road;
		}else{
			locAddress = province + city + district + address;
		}
	}
	content='<button class="tabbtn" οnclick="toCurrentStatus()">1</button>&nbsp'
	+'<button class="tabbtn" οnclick="toPliceInfo()">1</button>&nbsp'
	+'<div id="currentstatus" style="height:285px; width:350px; overflow:auto" ><table height="160px" width="260px">'
	+'<tr><td align="right">1</td><td>'+locAddress+'</td></tr>'
	+'<tr><td align="right">1</td><td>'+obj.rule_name+'</td></tr>'
	+'<tr><td align="right">1</td><td>'+obj.tel+'</td></tr>'
	+'<tr><td align="right">1</td><td>'+obj.record_time+'</td></tr>'
	+'<tr><td align="center" colspan="2"></td></tr></table></div>';
	var infoWindow = new AMap.InfoWindow({
		content:content,
		size:new AMap.Size(320,190),
		offset:{x:15,y:5}
	});
	infoWindow.open(map,marker.getPosition()); 
}       

繼續閱讀