这篇文章主要介绍了关于高德地图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/
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
html用表格布局来实现用户注册表单实例
点击按钮文字变成input框,点击保存变成文字的实现
以上就是关于高德地图web版基础控件的展示的详细内容。