高德地图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(www.iohph.com);});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 http://www.qlyl1688.com/product_flftfh.html ); });//加点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/

高德地图WEB端软件应用相关推荐

前端系列——vue2+高德地图web端开发（poi搜索两种方式）
前端系列--vue2+高德地图web端开发(poi搜索) 前言基础什么是poi搜索 1. 输入提示结合poi搜索官方代码步骤 1.进行plugins插件注册 2.data中编写placeSea ...
前端系列——vue2+高德地图web端开发（使用和引入）
vue2+高德地图web端开发(使用和引入) 前言基础准备工作高德地图的个人开发者注册高德api网址 1.点击进行注册 2.注册完之后进入控制台 3.创建新应用 4.添加高德 2.0 新增 ...
前端系列——vue2+高德地图web端开发（行政区边界绘制）
vue2+高德地图web端开发(行政区边界绘制) 前言原理基础实现步骤 1.eslint设置AMap为全局变量放置报错 2.Search.vue传输给MapContainer.vue数据然后进行 ...
高德地图web端接入
1.准备阶段进入高德开发平台(高德开放平台 | 高德地图API),登录你的账号,如果没有账号需要先注册,进行开发者的认证,这里由于我已经认证过了,所以直接注册流程就不展示了. 打开控制台,选择应用管 ...
高德地图Web端JavaScript API开发(二)---在地图上绘制(点标注)
使用高德地图在很多时候需要在地图上标记位置,并且很多时候需要用到自定义的图标去完成这种位置的标记. 当然,这些功能高德地图都为我们准备了,比如常用的地图覆盖物Marker和信息窗体等.这里就先说一下点 ...
高德地图WEB端，在所画的圆（Circle）内显示在圆（Marker）内的点
1.圆和点都是自己定义的,如图: 2.在高德地图的示例中心测试通过,代码如下: <!doctype html> <html> <head><meta char ...
高德地图web端js
下面是一些高德地图使用例子,自定义展示,右击拖动,搜索,画圆,定位等功能,没有整理仅供参考 var infoWindow = new AMap.InfoWindow({isCustom:true,// ...
高德地图-web端根据地理编码和逆地理编码
首先,用地址生成器快速生成一张地图,网址为lbs.amap.com/console/show/tools: <!DOCTYPE html> <html> <head> ...
高德地图 web 端 JS API 遇到的坑及性能优化
[JS API V2.0] 本指望全面提升一下性能,结果发现一些硬伤,迫不得已转到1.4.15版本,先说一下最新的v2.0的问题. 因为务业需要规划线路,但是这个版本中,规划线路,并且经过中间点时,部 ...

高德地图WEB端软件应用

高德地图WEB端软件应用相关推荐

最新文章

热门文章