关于高德地图WEB版基础控件的展示

互联网 18-7-4

这篇文章主要介绍了关于高德地图WEB版基础控件的展示，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

最近学习了一下高德地图web版的使用,总结了一下高德基础控件的应用,高德地图是开源可编辑的,方法不是很难,有兴趣的朋友可以试一试自己编辑一下.

之前想自己做一个旅游导航的项目，在网上一搜发现了高德地图开放平台，发现原来高德可以很简单的就应用到自己的项目里面，当即我就申请了一个key来学一学，仔细研究了一下，感觉还挺难的，网上找了找案例什么的，经过这几天，小编把高德的一些基础控件差不多弄了一下，效果图如下图所示：

废话不多说，直接上源码，下面是js代码：

<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.homeControlp = function(){} AMap.homeControlp.prototype = {  addTo: function(map, dom){  dom.appendChild(this._getHtmlDom(map));  },  _getHtmlDom:function(map){  this.map=map;  // 创建一个能承载控件的<p>容器  controlUI = document.createElement("p");  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(homeControlp,"hide"); AMap.event.addListener(homeControlp,"hide",function(){ 	controlUI.style.display = 'none'; })  function myControl(){ 	homeControl = new AMap.homeControlp(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>

下面是HTML代码：

<body onLoad="mapInit()">  <p id="iCenter"></p>  <p 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><p class="detail"><p><span id="lnglat"> </span></p><p><span id="iAddress"> </span></p></p></li> 			<li><button onclick="javascript:Coordinate();">坐标拾取控件</button><button onclick="javascript:reload();">取消坐标拾取</button></li>  			 		</ul> 	</p> </body>

在js第一行引入高德地图API中，key值是我自己在高德地图里面创建的也可以用，你们也可以上高德开放平台自行申请key值试一试。

高德开放平台：developer.amap.com/

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！