• 售前

  • 售后

热门帖子
入门百科

[原创]高德舆图WEB版根本控件展示

[复制链接]
我爱霍启刚掖 显示全部楼层 发表于 2021-8-16 12:18:10 |阅读模式 打印 上一主题 下一主题
之前想自己做一个旅游导航的项目,在网上一搜发现了高德舆图开放平台,发现原来高德可以很简单的就应用到自己的项目内里,立即我就申请了一个key来学一学,过细研究了一下,感觉还挺难的,网上找了找案例什么的,颠末这几天,小编把高德的一些底子控件差不多弄了一下,结果图如下图所示:

废话不多说,直接上源码,下面是js代码:
[code]<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代码:
[code]<body > <div id="iCenter"></div> <div id="iControlbox">                <ul>                        <li><button >体现完整鱼骨</button><button >隐藏鱼骨</button><button >方向盘</button><button >长标尺</button><button >短标尺</button></li>                        <li><button >体现比例尺</button><button >隐藏比例尺</button></li>                        <li><button >体现鹰眼</button><button >隐藏鹰眼</button></li>                        <li><button >添加舆图类型切换</button><button >移除舆图类型切换</button></li>                        <li><button >添加圆形编辑器</button><button >删除圆形编辑器</button></li>                        <li><button >添加多边形编辑器</button><button >删除多边形编辑器</button></li>                                                <li><button >鼠标办理工具</button><button >扫除</button></li>                                        <li><button >鼠标画折线工具</button><button >扫除</button></li>                                <li><button >鼠标画多边形工具</button><button >扫除</button></li>                        <li><button >鼠标画圆形工具</button><button >扫除</button></li>                        <li><button >鼠标画矩形工具</button><button >扫除</button></li>                        <li><button >鼠标测距工具</button><button >扫除</button></li>                        <li><button >鼠标测面积</button><button >移除</button></li>                        <li><button >鼠标框选缩小</button><button >鼠标框选放大</button><button >关闭鼠标放大缩小</button></li>                        <li><button >测距插件</button><button >隐藏测距</button></li>                        <li><button >添加自界说控件</button><button >移除自界说控件</button></li>                        <li><div class="detail"><p><span id="lnglat"> </span></p><p><span id="iAddress"> </span></p></div></li>                        <li><button >坐标拾取控件</button><button >取消坐标拾取</button></li>                                        </ul>        </div></body>在js第一行引入高德舆图API中,key值是我自己在高德舆图内里创建的也可以用,你们也可以上高德开放平台自行申请key值试一试。
高德开放平台:developer.amap.com/
这里是本结果图源码下载地点,感兴趣的朋友可以直接下载
点击此处下载

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作