<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=3c5ca12a5778fde874e9959c7fbdf516">//引入高德地圖API</script> <script language="javascript">var mapObj;var scale;var mapType;var toolBar;var overView;var circleEditor;var circle;var polygonEditor;var polygon;var homeControl;var controlUI;var ruler;var mousetool;//刷新頁面function reload(){	location.reload();}function mapInit(){ mapObj = new AMap.Map("iCenter",{		center:new AMap.LngLat(116.397728,39.90423), //地圖中心點		level:13, //地圖顯示的比例尺級別	});	mapObj.plugin(["AMap.ToolBar"],function(){ //在地圖中添加ToolBar插件 toolBar = new AMap.ToolBar(); mapObj.addControl(toolBar); }); mapObj.plugin(["AMap.Scale"],function(){ //加載比例尺插件 scale = new AMap.Scale(); mapObj.addControl(scale);		scale.show(); });	mapObj.plugin(["AMap.OverView"],function(){ //在地圖中添加鷹眼插件 //加載鷹眼 overView = new AMap.OverView({ visible:true //初始化顯示鷹眼 }); mapObj.addControl(overView);		overView.open(); //展開鷹眼 });	mapObj.plugin(["AMap.RangingTool"],function(){ 		ruler = new AMap.RangingTool(mapObj); 		AMap.event.addListener(ruler,"end",function(e){  ruler.turnOff();  }); 			}); 	mapObj.plugin(["AMap.MouseTool"],function(){ 	 //鼠標工具插件		mousetool = new AMap.MouseTool(mapObj); 		 	});}function Coordinate(){	AMap.event.addListener(mapObj,'click',getLnglat); //點擊事件}function toolBarShow(){	toolBar.show();	toolBar.showRuler();	toolBar.showDirection();}function toolBarDirection(){	toolBar.show();	toolBar.showDirection();	toolBar.hideRuler();}function toolBarLong(){	toolBar.show();	toolBar.hideDirection();	toolBar.showRuler();}function toolBarShot(){	toolBar.show();	toolBar.hideRuler();	toolBar.hideDirection();}function iMapType(){	mapObj.plugin(["AMap.MapType"],function(){ //添加地圖類型切換插件 //地圖類型切換 mapType= new AMap.MapType({defaultType:1,showRoad:true}); mapObj.addControl(mapType); });}function removeMapType(){	mapObj.removeControl(mapType);}function iCircleEditor(){ //圓形編輯器	circle = new AMap.Circle({ //圓形編輯器的樣式		map: mapObj,		center:new AMap.LngLat("116.40332221984863","39.90025505675715"),		radius:1000,		strokeColor: "#F33",		strokeOpacity: 1,		strokeWeight: 3,		fillColor: "ee2200",		fillOpacity: 0.35	});	mapObj.plugin(["AMap.CircleEditor"],function(){		circleEditor = new AMap.CircleEditor(mapObj,circle); //創建圓形編輯器對象		circleEditor.open(); //打開圓形編輯器	});}function removeCicleEditor(){ //關閉圓形編輯器，隱藏圓形	circleEditor.close();	circle.hide();}function iPloygonEditor(){ //編輯多邊形 var arr=new Array();//經緯度坐標數組 arr.push(new AMap.LngLat("116.403322","39.920255")); arr.push(new AMap.LngLat("116.410703","39.897555")); arr.push(new AMap.LngLat("116.402292","39.892353")); arr.push(new AMap.LngLat("116.389846","39.891365")); polygon = new AMap.Polygon({ path:arr, //設置多邊形輪廓的節點數組 strokeColor:"#0000ff", strokeOpacity:0.2, strokeWeight:3, fillColor: "#f5deb3", fillOpacity: 0.35 }); //地圖上添加多邊形 mapObj.addOverlays(polygon); //構造多邊形編輯對象，并開啟多邊形的編輯狀態 mapObj.plugin(["AMap.PolyEditor"],function(){ polygonEditor = new AMap.PolyEditor(mapObj,polygon); polygonEditor.open(); });}function removePloygonEditor(){	polygonEditor.close();	polygon.hide();}AMap.homeControlDiv = function(){}AMap.homeControlDiv.prototype = { addTo: function(map, dom){ dom.appendChild(this._getHtmlDom(map)); }, _getHtmlDom:function(map){ this.map=map; // 創建一個能承載控件的<div>容器 controlUI = document.createElement("DIV"); controlUI.style.width='80px'; //設置控件容器的寬度 controlUI.style.height='20px'; //設置控件容器的高度 controlUI.style.backgroundColor='white'; controlUI.style.borderStyle='solid'; controlUI.style.borderWidth='2px'; controlUI.style.cursor='pointer'; controlUI.style.textAlign='center'; // 設置控件的位置 controlUI.style.position='absolute'; controlUI.style.left='120px'; //設置控件離地圖的左邊界的偏移量 controlUI.style.top='5px'; //設置控件離地圖上邊界的偏移量 controlUI.style.zIndex='300'; //設置控件在地圖上顯示 // 設置控件字體樣式 controlUI.style.fontFamily='Arial,sens-serif'; controlUI.style.fontSize='12px'; controlUI.style.paddingLeft='4px'; controlUI.style.paddingRight='4px'; controlUI.innerHTML="換中心點"; // 設置控件響應點擊onclick事件 controlUI.onclick = function(){ map.setCenter(new AMap.LngLat(116.234404, 39.12915)); } return controlUI; }}AMap.event.trigger(homeControlDiv,"hide");AMap.event.addListener(homeControlDiv,"hide",function(){	controlUI.style.display = 'none';})function myControl(){	homeControl = new AMap.homeControlDiv(mapObj); //新建自定義插件對象	mapObj.addControl(homeControl); //地圖上添加插件}function removeMyControl(){	homeControl.hide();	//controlUI.style.display='none';}function iRangingTool(){	ruler.turnOn();}function removeRangingTool(){	ruler.turnOff();	mapObj.clearMap();	//ruler.hide();	//ruler.setMap(null);		//mapObj.removeControl(ruler);}function iMarker(){	mousetool.marker(); //使用鼠標工具，在地圖上畫標記點}function iMeasureArea(){	mousetool.measureArea();}function iRectZoomIn(){	mousetool.rectZoomIn();}function iRectZoomOut(){	mousetool.rectZoomOut();}function iPolyline(){	mousetool.polyline();}function iPolygon(){	mousetool.polygon();}function iCircle(){	mousetool.circle();}function iRectangle(){	mousetool.rectangle();}function iRule(){	mousetool.rule();}function removeMouseTool(){	mousetool.close(true);}function geocoder() { var MGeocoder; //加載地理編碼插件 mapObj.plugin(["AMap.Geocoder"], function() {  MGeocoder = new AMap.Geocoder({  radius: 1000, extensions: "all" }); //返回地理編碼結果  AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack);  //逆地理編碼 MGeocoder.getAddress(lnglatXY);  }); //加點 var marker = new AMap.Marker({ map:mapObj, icon: new AMap.Icon({ image: "http://api.amap.com/Public/images/js/mark.png", size:new AMap.Size(58,30), imageOffset: new AMap.Pixel(-32, -0) }), position: lnglatXY, offset: new AMap.Pixel(-5,-30) }); // mapObj.setFitView();}//回調函數function geocoder_CallBack(data) { var address; //返回地址描述 address = data.regeocode.formattedAddress; //返回結果拼接輸出 document.getElementById("iAddress").innerHTML = address;} //鼠標點擊，獲取經緯度坐標 function getLnglat(e){ 	mapObj.clearMap();	var x = e.lnglat.getLng();	var y = e.lnglat.getLat(); 	document.getElementById("lnglat").innerHTML = x + "," + y;		lnglatXY = new AMap.LngLat(x,y);	geocoder();}</script>

<body onLoad="mapInit()"> <div id="iCenter"></div> <div id="iControlbox">		<ul>			<li><button onclick="javascript:toolBarShow();">顯示完整魚骨</button><button onclick="javascript:toolBar.hide();">隱藏魚骨</button><button onclick="javascript:toolBarDirection();">方向盤</button><button onclick="javascript:toolBarLong();">長標尺</button><button onclick="javascript:toolBarShot();">短標尺</button></li>			<li><button onclick="javascript:scale.show();">顯示比例尺</button><button onclick="javascript:scale.hide();">隱藏比例尺</button></li>			<li><button onclick="javascript:overView.show();">顯示鷹眼</button><button onclick="javascript:overView.hide();">隱藏鷹眼</button></li>			<li><button onclick="javascript:iMapType();">添加地圖類型切換</button><button onclick="javascript:removeMapType();">移除地圖類型切換</button></li>			<li><button onclick="javascript:iCircleEditor();">添加圓形編輯器</button><button onclick="javascript:removeCicleEditor();">刪除圓形編輯器</button></li>			<li><button onclick="javascript:iPloygonEditor();">添加多邊形編輯器</button><button onclick="javascript:removePloygonEditor();">刪除多邊形編輯器</button></li>						<li><button onclick="javascript:iMarker();">鼠標打點工具</button><button onclick="javascript:removeMouseTool();">清除</button></li>					<li><button onclick="javascript:iPolyline();">鼠標畫折線工具</button><button onclick="javascript:removeMouseTool();">清除</button></li>				<li><button onclick="javascript:iPolygon();">鼠標畫多邊形工具</button><button onclick="javascript:removeMouseTool();">清除</button></li>			<li><button onclick="javascript:iCircle();">鼠標畫圓形工具</button><button onclick="javascript:removeMouseTool();">清除</button></li>			<li><button onclick="javascript:iRectangle();">鼠標畫矩形工具</button><button onclick="javascript:removeMouseTool();">清除</button></li>			<li><button onclick="javascript:iRule();">鼠標測距工具</button><button onclick="javascript:removeMouseTool();">清除</button></li>			<li><button onclick="javascript:iMeasureArea();">鼠標測面積</button><button onclick="javascript:removeMouseTool();">移除</button></li>			<li><button onclick="javascript:iRectZoomIn();">鼠標框選縮小</button><button onclick="javascript:iRectZoomOut();">鼠標框選放大</button><button onclick="javascript:removeRangingTool();">關閉鼠標放大縮小</button></li>			<li><button onclick="javascript:iRangingTool();">測距插件</button><button onclick="javascript:removeRangingTool();">隱藏測距</button></li>			<li><button onclick="javascript:myControl();">添加自定義控件</button><button onclick="javascript:removeMyControl();">移除自定義控件</button></li>			<li><div class="detail"><p><span id="lnglat">&nbsp;</span></p><p><span id="iAddress">&nbsp;</span></p></div></li>			<li><button onclick="javascript:Coordinate();">坐標拾取控件</button><button onclick="javascript:reload();">取消坐標拾取</button></li>					</ul>	</div></body>