这篇文章主要介绍了关于高德地图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/
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
Atas ialah kandungan terperinci 关于高德地图WEB版基础控件的展示. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Cara menggunakan kawalan panel
Penggunaan console.log
penggunaan propertydescriptor
Apa yang berlaku dengan lampu merah pada isyarat lampu?
Adakah OS Hongmeng dikira sebagai Android?
Sistem Android milik syarikat manakah?
Bagaimana untuk mengukur kelajuan rangkaian pada komputer
Cara menggunakan fungsi paksi dalam Matlab
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
