高德地图WEB版基础控件展示 <font color=red>原创</font>

之前想自己做一个旅游导航的项目，在网上一搜发现了高德地图开放平台，发现原来高德可以很简单的就应用到自己的项目里面，当即我就申请了一个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.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>
    

下面是HTML代码：

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>
    

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

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

这里是本效果图源码下载地址，感兴趣的朋友可以直接下载

点击此处下载

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！