高德地图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>

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

相关推荐：

php HTML无刷新提交表单的方法及实例

HTML文档内嵌入JS方法汇总

jQuery实现HTML页面文本框模糊匹配查询（附代码）

以上就是高德地图WEB版的使用的详细内容，更多内容请关注技术你好其它相关文章！